Nav v2 correctif : panneau inset-0 avec barre de fermeture ✕ interne
Le ✕ était le burger du header sticky ; si le header n'est pas épinglé (bas de page), il est hors écran. Le panneau passe en fixed inset-0 avec sa propre barre h-14 + bouton ✕ (toujours visible, une seule commande de fermeture — le panneau couvre le burger). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 changed file +28 −5
modified
apps/web/components/mobile-nav.tsx
+28 −5
@@ -5,11 +5,12 @@ | ||
| 5 | 5 | * |
| 6 | 6 | * Standard KA Nav v2 (2026-08-25) : |
| 7 | 7 | * · bouton 44×44 (var(--touch)), visible uniquement < 768 px (md:hidden) ; |
| 8 | − * · panneau `fixed inset-x-0 top-14 bottom-0` (plein écran sous le header | |
| 9 | − * sticky h-14) — visible peu importe la position de scroll ; le header | |
| 10 | − * n'a PAS de backdrop-filter, le fixed n'est donc pas re-parenté ; | |
| 8 | + * · panneau `fixed inset-0` (plein écran, z-modal) avec sa PROPRE barre de | |
| 9 | + * fermeture ✕ — le burger du header ne sert qu'à ouvrir : si le header | |
| 10 | + * n'est pas épinglé (bas de page), le ✕ interne reste visible ; | |
| 11 | + * · le header n'a PAS de backdrop-filter, le fixed n'est pas re-parenté ; | |
| 11 | 12 | * · verrou de scroll via la classe ka-scroll-lock sur <html> ; |
| 12 | − * · fermeture : Escape (focus rendu au bouton), navigation, bouton ✕ ; | |
| 13 | + * · fermeture : ✕ interne, Escape (focus rendu au bouton), navigation ; | |
| 13 | 14 | * · liens géants numérotés (gk-display), safe-area iPhone en bas ; |
| 14 | 15 | * · z-index : échelle --z-* des tokens (900 = --z-modal). |
| 15 | 16 | */ |
@@ -107,9 +108,31 @@ export function MobileNav({ links }: MobileNavProps) { | ||
| 107 | 108 | role="dialog" |
| 108 | 109 | aria-modal="true" |
| 109 | 110 | aria-label="Menu" |
| 110 | − className="fixed inset-x-0 bottom-0 top-14 z-[var(--z-modal,900)] flex flex-col overflow-y-auto overscroll-contain bg-paper" | |
| 111 | + className="fixed inset-0 z-[var(--z-modal,900)] flex flex-col overflow-y-auto overscroll-contain bg-paper" | |
| 111 | 112 | style={{ paddingBottom: "max(20px, env(safe-area-inset-bottom, 0px))" }} |
| 112 | 113 | > |
| 114 | + <div className="flex h-14 shrink-0 items-center justify-end border-b-[1.5px] border-[var(--line-strong)] px-4"> | |
| 115 | + <button | |
| 116 | + type="button" | |
| 117 | + onClick={() => setOpen(false)} | |
| 118 | + aria-label="Fermer le menu" | |
| 119 | + className="flex h-11 w-11 items-center justify-center rounded-full border-[1.5px] border-ink" | |
| 120 | + style={{ background: "var(--ink)", color: "var(--paper)" }} | |
| 121 | + > | |
| 122 | + <svg | |
| 123 | + width="20" | |
| 124 | + height="20" | |
| 125 | + viewBox="0 0 20 20" | |
| 126 | + fill="none" | |
| 127 | + stroke="currentColor" | |
| 128 | + strokeWidth="2" | |
| 129 | + strokeLinecap="round" | |
| 130 | + aria-hidden="true" | |
| 131 | + > | |
| 132 | + <path d="M4 4l12 12M16 4L4 16" /> | |
| 133 | + </svg> | |
| 134 | + </button> | |
| 135 | + </div> | |
| 113 | 136 | <ul className="flex flex-1 flex-col justify-center px-6 py-8"> |
| 114 | 137 | {links.map((link, i) => ( |
| 115 | 138 | <li |
| 116 | 139 | |