Nav v2 correctif : le ✕ de fermeture vit DANS le panneau (fixe, toujours visible)

Le ✕ était le burger du header ; si le header n'est pas épinglé (bas de page),
il défilait hors écran alors que le panneau fixed restait affiché — impossible
de fermer sans Escape. Ajout d'un .mm-close position:fixed en haut à droite du
panneau et burger masqué à l'ouverture (une seule commande de fermeture).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Simon-Pierre Boucher committed 2 mo ago (Aug 25, 2026) parent cfeebb4 Browse files

2 changed files +13 −2

modified frontend/src/App.tsx +3 −0

				`@@ -188,6 +188,9 @@ function Header() {`
188		188
189	{/* menu déroulant mobile */}	189	{/* menu déroulant mobile */}
190	<div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile">	190	<div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile">
		191	+ {/* ✕ fixe du panneau : visible peu importe le scroll, le burger du header est masqué à l'ouverture */}
		192	+ <button type="button" className="mm-close" aria-label="Fermer le menu"
		193	+ onClick={() => setOpen(false)}>✕</button>
191	{NAV_LINKS.map((l, i) => (	194	{NAV_LINKS.map((l, i) => (
192	<NavLink	195	<NavLink
193	key={l.to}	196	key={l.to}

modified frontend/src/styles.css +10 −2

				`@@ -828,8 +828,16 @@ img { display: block; }`
828	}	828	}
829	.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }	829	.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }
830	@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }	830	@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
831	−/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */	831	+/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */
832	−.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; }	832	+.header:has(.mobile-menu.open) .menu-btn { visibility: hidden; }
		833	+/* bouton de fermeture du panneau : fixe en haut a droite du viewport */
		834	+.mm-close {
		835	+ position: fixed; top: 10px; right: 14px; z-index: 2;
		836	+ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
		837	+ border: 1.5px solid var(--ink); border-radius: 999px;
		838	+ background: var(--ink); color: var(--paper);
		839	+ font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
		840	+}
833	/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */	841	/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */
834	html:has(.mobile-menu.open) { overflow: hidden; }	842	html:has(.mobile-menu.open) { overflow: hidden; }
835	/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau	843	/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau
836		844

spb/resto-ka

Nav v2 correctif : le ✕ de fermeture vit DANS le panneau (fixe, toujours visible)

Theme