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
@@ -260,6 +260,9 @@ function Header() { | ||
| 260 | 260 | |
| 261 | 261 | {/* menu déroulant mobile */} |
| 262 | 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 | 266 | {NAV_LINKS.map((l, i) => ( |
| 264 | 267 | <NavLink |
| 265 | 268 | key={l.to} |
modified
frontend/src/styles.css
+10 −2
@@ -782,8 +782,16 @@ html, body { overflow-x: clip; } | ||
| 782 | 782 | } |
| 783 | 783 | .mobile-menu.open { display: block; animation: mm-in 0.16s ease; } |
| 784 | 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 */ | |
| 786 | −.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; } | |
| 785 | +/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */ | |
| 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 | 795 | /* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */ |
| 788 | 796 | html:has(.mobile-menu.open) { overflow: hidden; } |
| 789 | 797 | /* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau |
| 790 | 798 | |