"use client"; // File: mobile-menu.tsx // Path: apps/web/components/mobile-menu.tsx // Project: AI Risk Index — airiskindex.io // Author: Simon-Pierre Boucher // Contact: contact@spboucher.ai // Copyright © 2026 Simon-Pierre Boucher. All rights reserved. // // Description: Mobile right-side drawer menu (portal, scroll lock, Escape/overlay close). import Link from "next/link"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { LogoMark } from "./logo"; export function MobileMenu({ items }: { items: ReadonlyArray }): JSX.Element { const [open, setOpen] = useState(false); // Close on Escape; lock scroll while open. useEffect(() => { if (!open) return; const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") setOpen(false); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [open]); return (

{/* Portal to : the blurred sticky header is a containing block for fixed descendants, which would trap and stretch the drawer. */} {open && createPortal( <>

setOpen(false)} className="block py-3.5 text-base font-medium text-[var(--ink)] active:bg-[var(--wash)]" > {label}

, document.body, )} ); }