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>
2 changed files +22 −1
modified
frontend/src/App.tsx
+11 −0
@@ -149,6 +149,17 @@ export default function App() { | ||
| 149 | 149 | </button> |
| 150 | 150 | </div> |
| 151 | 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 | 163 | {NAV_LINKS.map((l) => ( |
| 153 | 164 | <NavLink |
| 154 | 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 | 136 | .mobile-menu.open { animation: mm-in 0.16s ease; } |
| 137 | 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 | 149 | .mobile-menu a { |
| 140 | 150 | display: flex; align-items: baseline; gap: 13px; padding: 16px 2px; |
| 141 | 151 | color: #f5f3ee; font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif); |
| 142 | 152 | |