standard header/menu KA 2026-08-22 : header opaque + z-index tokens + ka-scroll-lock
4 changed files +15 −14
modified
frontend/src/App.tsx
+3 −3
@@ -152,13 +152,13 @@ function Header() { | ||
| 152 | 152 | // fermer le menu à chaque navigation + verrouiller le défilement en dessous |
| 153 | 153 | useEffect(() => { setOpen(false); }, [location]); |
| 154 | 154 | useEffect(() => { |
| 155 | − document.body.style.overflow = open ? "hidden" : ""; | |
| 156 | − return () => { document.body.style.overflow = ""; }; | |
| 155 | + document.documentElement.classList.toggle("ka-scroll-lock", open); | |
| 156 | + return () => { document.documentElement.classList.remove("ka-scroll-lock"); }; | |
| 157 | 157 | }, [open]); |
| 158 | 158 | |
| 159 | 159 | return ( |
| 160 | 160 | <> |
| 161 | − <header className="header"> | |
| 161 | + <header className={`header ${open ? "menu-open" : ""}`}> | |
| 162 | 162 | <div className="container header-inner"> |
| 163 | 163 | <NavLink to="/" className="brand" aria-label="Food·Ka — accueil"> |
| 164 | 164 | <span className="brand-mark" aria-hidden="true"> |
modified
frontend/src/pages/Home.tsx
+2 −2
@@ -56,11 +56,11 @@ export default function Home({ aubaines = false }: { aubaines?: boolean }) { | ||
| 56 | 56 | // (même patron que le menu mobile du header — App.tsx) |
| 57 | 57 | useEffect(() => { |
| 58 | 58 | if (!sheetOpen) return; |
| 59 | − document.body.style.overflow = "hidden"; | |
| 59 | + document.documentElement.classList.add("ka-scroll-lock"); | |
| 60 | 60 | const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setSheetOpen(false); }; |
| 61 | 61 | window.addEventListener("keydown", onKey); |
| 62 | 62 | return () => { |
| 63 | − document.body.style.overflow = ""; | |
| 63 | + document.documentElement.classList.remove("ka-scroll-lock"); | |
| 64 | 64 | window.removeEventListener("keydown", onKey); |
| 65 | 65 | }; |
| 66 | 66 | }, [sheetOpen]); |
modified
frontend/src/pages/Product.tsx
+2 −2
@@ -28,11 +28,11 @@ function Galerie({ images, titre }: { images: string[]; titre: string }) { | ||
| 28 | 28 | // (le tap n'importe où sur la lightbox ferme déjà — onClick du conteneur) |
| 29 | 29 | useEffect(() => { |
| 30 | 30 | if (!zoom) return; |
| 31 | − document.body.style.overflow = "hidden"; | |
| 31 | + document.documentElement.classList.add("ka-scroll-lock"); | |
| 32 | 32 | const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setZoom(false); }; |
| 33 | 33 | window.addEventListener("keydown", onKey); |
| 34 | 34 | return () => { |
| 35 | − document.body.style.overflow = ""; | |
| 35 | + document.documentElement.classList.remove("ka-scroll-lock"); | |
| 36 | 36 | window.removeEventListener("keydown", onKey); |
| 37 | 37 | }; |
| 38 | 38 | }, [zoom]); |
modified
frontend/src/styles.css
+8 −7
@@ -34,9 +34,8 @@ button { font-family: inherit; } | ||
| 34 | 34 | |
| 35 | 35 | /* ================= Header ================= */ |
| 36 | 36 | .header { |
| 37 | − position: sticky; top: 0; z-index: 50; | |
| 38 | − background: rgba(245, 243, 238, 0.88); | |
| 39 | − backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); | |
| 37 | + position: sticky; top: 0; z-index: var(--z-header, 500); | |
| 38 | + background: var(--paper); | |
| 40 | 39 | border-bottom: 2px solid var(--ink); |
| 41 | 40 | } |
| 42 | 41 | .header-inner { display: flex; align-items: center; gap: 20px; height: 64px; } |
@@ -771,9 +770,11 @@ button { font-family: inherit; } | ||
| 771 | 770 | font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; |
| 772 | 771 | } |
| 773 | 772 | .mm-backdrop { |
| 774 | − position: fixed; inset: 0; z-index: 40; | |
| 773 | + position: fixed; inset: 0; z-index: var(--z-overlay, 800); | |
| 775 | 774 | background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px); |
| 776 | 775 | } |
| 776 | +/* .menu-open remonte le header (et son menu déroulant) au-dessus du backdrop */ | |
| 777 | +.header.menu-open { z-index: var(--z-modal, 900); } | |
| 777 | 778 | @media (max-width: 880px) { |
| 778 | 779 | .menu-btn { display: flex; } |
| 779 | 780 | .nav { display: none; } |
@@ -821,7 +822,7 @@ button { font-family: inherit; } | ||
| 821 | 822 | |
| 822 | 823 | /* --- CTA sticky mobile (fiche produit) -------------------------------------- */ |
| 823 | 824 | .cta-sticky { |
| 824 | − position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; | |
| 825 | + position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar, 600); | |
| 825 | 826 | display: flex; align-items: center; gap: 12px; |
| 826 | 827 | background: rgba(245, 243, 238, 0.94); backdrop-filter: blur(12px); |
| 827 | 828 | border-top: 2px solid var(--ink); |
@@ -1000,9 +1001,9 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ | ||
| 1000 | 1001 | } |
| 1001 | 1002 | .account-btn img { width: 100%; height: 100%; object-fit: cover; } |
| 1002 | 1003 | .account-initial { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--on-accent); } |
| 1003 | −.account-backdrop { position: fixed; inset: 0; z-index: 90; } | |
| 1004 | +.account-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay, 800); } | |
| 1004 | 1005 | .account-menu { |
| 1005 | − position: absolute; right: 0; top: calc(100% + 10px); z-index: 91; | |
| 1006 | + position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-modal, 900); | |
| 1006 | 1007 | min-width: 250px; max-width: 320px; background: var(--surface); |
| 1007 | 1008 | border: 2px solid var(--ink); border-radius: var(--r-card); |
| 1008 | 1009 | box-shadow: var(--shadow-off); overflow: hidden; |
| 1009 | 1010 | |