// ============================================================ // mobile.jsx — viewport detection hook + mobile nav menu // Loaded before chrome.jsx so window.useViewport / window.MobileNavOverlay // are available when the other components evaluate. // ============================================================ // Single source of truth for the mobile breakpoint. window.__FL_MOBILE_BREAKPOINT = 768; // useViewport — returns { mobile: boolean }. Listens to matchMedia so // rotation / window-resize updates trigger a React re-render. window.useViewport = function useViewport() { const query = "(max-width: " + window.__FL_MOBILE_BREAKPOINT + "px)"; const get = () => (typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query).matches : false); const [mobile, setMobile] = React.useState(get); React.useEffect(() => { const mql = window.matchMedia(query); const onChange = (e) => setMobile(e.matches); // Safari < 14 uses addListener / removeListener. if (mql.addEventListener) mql.addEventListener("change", onChange); else mql.addListener(onChange); return () => { if (mql.removeEventListener) mql.removeEventListener("change", onChange); else mql.removeListener(onChange); }; }, []); return { mobile }; }; // MobileNavOverlay — full-screen drawer that drops down when the // hamburger is tapped. Renders the same nav items the desktop bar would. window.MobileNavOverlay = function MobileNavOverlay({ open, onClose, items, current, onNavigate }) { // Lock body scroll while the drawer is open so the page underneath doesn't slide. React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [open]); if (!open) return null; return (

// NAVIGATION

); };