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 cfd288a Browse files

2 changed files +13 −2

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

				`@@ -260,6 +260,9 @@ function Header() {`
260		260
261	{/* menu déroulant mobile */}	261	{/* menu déroulant mobile */}
262	<div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile">	262	<div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile">
		263	+ {/* ✕ fixe du panneau : visible peu importe le scroll, le burger du header est masqué à l'ouverture */}
		264	+ <button type="button" className="mm-close" aria-label="Fermer le menu"
		265	+ onClick={() => setOpen(false)}>✕</button>
263	{NAV_LINKS.map((l, i) => (	266	{NAV_LINKS.map((l, i) => (
264	<NavLink	267	<NavLink
265	key={l.to}	268	key={l.to}

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

				`@@ -782,8 +782,16 @@ html, body { overflow-x: clip; }`
782	}	782	}
783	.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }	783	.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }
784	@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }	784	@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
785	−/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */	785	+/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */
786	−.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; }	786	+.header:has(.mobile-menu.open) .menu-btn { visibility: hidden; }
		787	+/* bouton de fermeture du panneau : fixe en haut a droite du viewport */
		788	+.mm-close {
		789	+ position: fixed; top: 10px; right: 14px; z-index: 2;
		790	+ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
		791	+ border: 1.5px solid var(--ink); border-radius: 999px;
		792	+ background: var(--ink); color: var(--paper);
		793	+ font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
		794	+}
787	/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */	795	/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */
788	html:has(.mobile-menu.open) { overflow: hidden; }	796	html:has(.mobile-menu.open) { overflow: hidden; }
789	/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau	797	/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau
790		798

spb/lou-ka

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

Theme