| 62 |
62 |
const loc = useLocation(); |
| 63 |
63 |
const nav = useNavigate(); |
| 64 |
64 |
|
| 65 |
|
− // menu ouvert = verrou du scroll d'arrière-plan + fermeture par Escape et |
| 66 |
|
− // par tap extérieur au niveau document (le backdrop fixed est confiné au |
| 67 |
|
− // header par son backdrop-filter — containing block — il ne couvre pas |
| 68 |
|
− // toute la page) |
|
65 |
+ // menu ouvert = verrou du scroll d'arrière-plan (ka-scroll-lock sur <html>) |
|
66 |
+ // + fermeture par Escape et par tap extérieur au niveau document |
| 69 |
67 |
useEffect(() => { |
| 70 |
68 |
if (!menuOpen) return; |
| 71 |
|
− document.body.style.overflow = "hidden"; |
|
69 |
+ document.documentElement.classList.add("ka-scroll-lock"); |
| 72 |
70 |
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setMenuOpen(false); }; |
| 73 |
71 |
const onDown = (e: PointerEvent) => { |
| 74 |
72 |
if (!(e.target as Element | null)?.closest(".account")) setMenuOpen(false); |
| 76 |
74 |
window.addEventListener("keydown", onKey); |
| 77 |
75 |
document.addEventListener("pointerdown", onDown); |
| 78 |
76 |
return () => { |
| 79 |
|
− document.body.style.overflow = ""; |
|
77 |
+ document.documentElement.classList.remove("ka-scroll-lock"); |
| 80 |
78 |
window.removeEventListener("keydown", onKey); |
| 81 |
79 |
document.removeEventListener("pointerdown", onDown); |
| 82 |
80 |
}; |
| 171 |
169 |
useEffect(() => { setOpen(false); }, [location]); |
| 172 |
170 |
useEffect(() => { |
| 173 |
171 |
if (!open) return; |
| 174 |
|
− document.body.style.overflow = "hidden"; |
|
172 |
+ document.documentElement.classList.add("ka-scroll-lock"); |
| 175 |
173 |
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); }; |
| 176 |
174 |
window.addEventListener("keydown", onKey); |
| 177 |
175 |
return () => { |
| 178 |
|
− document.body.style.overflow = ""; |
|
176 |
+ document.documentElement.classList.remove("ka-scroll-lock"); |
| 179 |
177 |
window.removeEventListener("keydown", onKey); |
| 180 |
178 |
}; |
| 181 |
179 |
}, [open]); |
| 183 |
181 |
return ( |
| 184 |
182 |
<> |
| 185 |
183 |
{/* .menu-open remonte le header au-dessus du backdrop (posé HORS du |
| 186 |
|
− header : son backdrop-filter créerait un containing block pour |
| 187 |
|
− position:fixed) */} |
|
184 |
+ header, en frère) */} |
| 188 |
185 |
<header className={`header ${open ? "menu-open" : ""}`}> |
| 189 |
186 |
<div className="container header-inner"> |
| 190 |
187 |
<NavLink to="/" className="brand" aria-label="Auto-Ka — accueil"> |