/* global React, ReactDOM */ const { useState: useStateNav, useEffect: useEffectNav } = React; function PrimaryNav({ logoSrc = 'assets/logo-green.png', current = '' }) { const [openDD, setOpenDD] = useStateNav(false); const [openMobile, setOpenMobile] = useStateNav(false); const [openMerk, setOpenMerk] = useStateNav(false); const is = (k) => current === k ? ' is-current' : ''; // Lock body scroll when mobile menu or merkcheck popup is open useEffectNav(() => { document.body.style.overflow = (openMobile || openMerk) ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [openMobile, openMerk]); // Close merkcheck popup with Escape useEffectNav(() => { if (!openMerk) return; const onKey = (e) => { if (e.key === 'Escape') setOpenMerk(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [openMerk]); // Popup rendered straight onto via a portal, so no animation layer // (transform/will-change) can break its fixed full-screen positioning. const merkPopup = window.ReactDOM.createPortal(

{ if (e.target === e.currentTarget) setOpenMerk(false); }} aria-hidden={!openMerk}>

, document.body ); return ( {merkPopup} ); } window.PrimaryNav = PrimaryNav;