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>
2 changed files +13 −2
modified
frontend/src/App.tsx
+3 −0
@@ -204,6 +204,9 @@ function Header() { | ||
| 204 | 204 | |
| 205 | 205 | {/* menu déroulant mobile */} |
| 206 | 206 | <div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile"> |
| 207 | + {/* ✕ fixe du panneau : visible peu importe le scroll, le burger du header est masqué à l'ouverture */} | |
| 208 | + <button type="button" className="mm-close" aria-label="Fermer le menu" | |
| 209 | + onClick={() => setOpen(false)}>✕</button> | |
| 207 | 210 | {NAV_LINKS.map((l, i) => ( |
| 208 | 211 | <NavLink |
| 209 | 212 | key={l.to} |
modified
frontend/src/styles.css
+10 −2
@@ -752,8 +752,16 @@ button { font-family: inherit; } | ||
| 752 | 752 | } |
| 753 | 753 | .mobile-menu.open { display: block; animation: mm-in 0.16s ease; } |
| 754 | 754 | @keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } |
| 755 | −/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | |
| 756 | −.header.menu-open .header-inner { position: relative; z-index: 60; } | |
| 755 | +/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */ | |
| 756 | +.header.menu-open .menu-btn { visibility: hidden; } | |
| 757 | +/* bouton de fermeture du panneau : fixe en haut a droite du viewport */ | |
| 758 | +.mm-close { | |
| 759 | + position: fixed; top: 10px; right: 14px; z-index: 2; | |
| 760 | + width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; | |
| 761 | + border: 1.5px solid var(--ink); border-radius: 999px; | |
| 762 | + background: var(--ink); color: var(--paper); | |
| 763 | + font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; | |
| 764 | +} | |
| 757 | 765 | /* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ |
| 758 | 766 | html:has(.mobile-menu.open) { overflow: hidden; } |
| 759 | 767 | .mm-link { |
| 760 | 768 | |