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
@@ -214,6 +214,9 @@ function Header() { | ||
| 214 | 214 | |
| 215 | 215 | {/* menu déroulant mobile */} |
| 216 | 216 | <div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile"> |
| 217 | + {/* ✕ fixe du panneau : visible peu importe le scroll, le burger du header est masqué à l'ouverture */} | |
| 218 | + <button type="button" className="mm-close" aria-label="Fermer le menu" | |
| 219 | + onClick={() => setOpen(false)}>✕</button> | |
| 217 | 220 | {NAV_LINKS.map((l, i) => ( |
| 218 | 221 | <NavLink |
| 219 | 222 | key={l.to} |
modified
frontend/src/styles.css
+10 −2
@@ -667,8 +667,16 @@ a.hub-chip:hover { border-color: var(--ink); color: var(--ink); } | ||
| 667 | 667 | } |
| 668 | 668 | .mobile-menu.open { display: block; animation: mm-in 0.16s ease; } |
| 669 | 669 | @keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } |
| 670 | −/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */ | |
| 671 | −.header.menu-open .header-inner { position: relative; z-index: 60; } | |
| 670 | +/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */ | |
| 671 | +.header.menu-open .menu-btn { visibility: hidden; } | |
| 672 | +/* bouton de fermeture du panneau : fixe en haut a droite du viewport */ | |
| 673 | +.mm-close { | |
| 674 | + position: fixed; top: 10px; right: 14px; z-index: 2; | |
| 675 | + width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; | |
| 676 | + border: 1.5px solid var(--ink); border-radius: 999px; | |
| 677 | + background: var(--ink); color: var(--paper); | |
| 678 | + font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; | |
| 679 | +} | |
| 672 | 680 | /* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ |
| 673 | 681 | html:has(.mobile-menu.open) { overflow: hidden; } |
| 674 | 682 | .mm-link { |
| 675 | 683 | |