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é. Ajout d'un
.mm-close position:fixed en haut à droite du panneau et burger masqué à
l'ouverture.

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

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

2 changed files +22 −1

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

				`@@ -149,6 +149,17 @@ export default function App() {`
149	</button>	149	</button>
150	</div>	150	</div>
151	<div className={menuOpen ? "mobile-menu open" : "mobile-menu"}>	151	<div className={menuOpen ? "mobile-menu open" : "mobile-menu"}>
		152	+ {/* ✕ fixe du panneau : visible peu importe le scroll, le burger du
		153	+ header est masqué à l'ouverture */}
		154	+ <button
		155	+ type="button"
		156	+ className="mm-close"
		157	+ aria-label="Fermer le menu"
		158	+ onClick={() => setMenuOpen(false)}
		159	+ tabIndex={menuOpen ? undefined : -1}
		160	+ >
		161	+ ✕
		162	+ </button>
152	{NAV_LINKS.map((l) => (	163	{NAV_LINKS.map((l) => (
153	<NavLink	164	<NavLink
154	key={l.to}	165	key={l.to}

modified frontend/src/styles.css +11 −1

				`@@ -135,7 +135,17 @@ nav.main a.active { color: var(--accent-soft); background: rgb(255 255 255 / 10%`
135	}	135	}
136	.mobile-menu.open { animation: mm-in 0.16s ease; }	136	.mobile-menu.open { animation: mm-in 0.16s ease; }
137	@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }	137	@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
138	−header.site.menu-open .container { position: relative; z-index: 60; }	138	+/* burger masqué à l'ouverture : la fermeture passe par le ✕ fixe du panneau
		139	+ (le burger vit dans le header — hors écran si le header n'est pas épinglé) */
		140	+header.site.menu-open .menu-btn { visibility: hidden; }
		141	+/* bouton de fermeture du panneau : fixe en haut à droite du viewport */
		142	+.mm-close {
		143	+ position: fixed; top: 10px; right: 14px; z-index: 2;
		144	+ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
		145	+ border: 1.5px solid #f5f3ee; border-radius: 999px;
		146	+ background: #f5f3ee; color: var(--brand);
		147	+ font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
		148	+}
139	.mobile-menu a {	149	.mobile-menu a {
140	display: flex; align-items: baseline; gap: 13px; padding: 16px 2px;	150	display: flex; align-items: baseline; gap: 13px; padding: 16px 2px;
141	color: #f5f3ee; font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);	151	color: #f5f3ee; font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
142		152

spb/job-ka

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

Theme