"use client"; import { useEffect, useId, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { Button } from "@/components/ui/Button"; import { NavLinks } from "./NavLinks"; type Item = { label: string; href: string }; export function MobileNav({ items, cta, brandName, }: { items: Item[]; cta: Item; brandName: string; }) { const [open, setOpen] = useState(false); const panelId = useId(); const closeRef = useRef(null); const openerRef = useRef(null); useEffect(() => { if (!open) return; const prev = document.body.style.overflow; const opener = openerRef.current; document.body.style.overflow = "hidden"; closeRef.current?.focus(); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; document.removeEventListener("keydown", onKey); opener?.focus(); }; }, [open]); // Le panneau est rendu dans par un portail : l’en-tête utilise // backdrop-filter, qui ferait de lui le bloc conteneur d’un élément `fixed`. return (
{open ? createPortal( , document.body, ) : null}
); }