function Nav() {
const [scrolled, setScrolled] = React.useState(false);
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 30);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
// Close on Escape
React.useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open]);
// Lock body scroll while menu is open
React.useEffect(() => {
if (open) {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}
}, [open]);
// Close menu if viewport widens past mobile breakpoint
React.useEffect(() => {
if (!open) return;
const mq = window.matchMedia('(min-width: 961px)');
const onChange = (e) => { if (e.matches) setOpen(false); };
mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
return () => {
mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange);
};
}, [open]);
const close = () => setOpen(false);
return (
);
}
function LogoMark() {
// Stylised "ST" mark in yellow on dark — abstracted from the wordmark
return (
);
}
window.Nav = Nav;
window.LogoMark = LogoMark;