// Fixed navigation with native links and a keyboard-accessible mobile menu.
const NAV_LINKS = [
{ name: 'Home', path: '/' },
{ name: 'Work', path: '/work' },
{ name: 'Contact', path: '/contact' },
];
function Navbar({ route, onNavigate }) {
const [scrolled, setScrolled] = React.useState(() => window.scrollY > 50);
const [menuOpen, setMenuOpen] = React.useState(false);
const menuRef = React.useRef(null);
const openRef = React.useRef(null);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 50);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
React.useEffect(() => {
if (!menuOpen) return;
const previousOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
const focusable = () => [...menuRef.current.querySelectorAll('button, a[href]')];
focusable()[0]?.focus();
const onKey = (event) => {
if (event.key === 'Escape') { event.preventDefault(); setMenuOpen(false); }
if (event.key !== 'Tab') return;
const items = focusable();
const first = items[0], last = items[items.length - 1];
if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
};
const onResize = () => { if (window.innerWidth > 900) setMenuOpen(false); };
document.addEventListener('keydown', onKey);
window.addEventListener('resize', onResize);
return () => {
document.body.style.overflow = previousOverflow;
document.removeEventListener('keydown', onKey);
window.removeEventListener('resize', onResize);
openRef.current?.focus({ preventScroll: true });
};
}, [menuOpen]);
React.useEffect(() => setMenuOpen(false), [route]);
const follow = (event, path) => {
if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
event.preventDefault(); setMenuOpen(false); onNavigate(path);
};
return (
<>
{menuOpen && (
)}
);
}
window.Navbar = Navbar;