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
@@ -188,6 +188,9 @@ function Header() { | ||
| 188 | 188 | |
| 189 | 189 | {/* menu déroulant mobile */} |
| 190 | 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 | 194 | {NAV_LINKS.map((l, i) => ( |
| 192 | 195 | <NavLink |
| 193 | 196 | key={l.to} |
modified
frontend/src/styles.css
+10 −2
@@ -828,8 +828,16 @@ img { display: block; } | ||
| 828 | 828 | } |
| 829 | 829 | .mobile-menu.open { display: block; animation: mm-in 0.16s ease; } |
| 830 | 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 */ | |
| 832 | −.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; } | |
| 831 | +/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */ | |
| 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 | 841 | /* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ |
| 834 | 842 | html:has(.mobile-menu.open) { overflow: hidden; } |
| 835 | 843 | /* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau |
| 836 | 844 | |