// Top navigation
function Nav({ route, navigate }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const isMobile = useIsMobile();
useEffect(() => {
const on = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', on, { passive: true });
on();
return () => window.removeEventListener('scroll', on);
}, []);
// Close menu on route change
useEffect(() => { setMenuOpen(false); }, [route.name]);
// Lock body scroll when menu open
useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
const links = [
{ to: 'home', label: 'Home' },
{ to: 'work', label: 'Portfolio' },
{ to: 'services', label: 'Services' },
{ to: 'about', label: 'About' },
];
const go = (to) => { navigate(to); setMenuOpen(false); };
return (
<>
{/* Logo */}
{ e.preventDefault(); go('home'); }}
style={{ display: 'inline-flex', alignItems: 'baseline', gap: '8px' }}>
ari joon
{/* Desktop nav */}
{!isMobile && (
)}
{/* Desktop CTA / Mobile hamburger */}
{!isMobile ? (
{ e.preventDefault(); go('inquiry'); }}
className="nav-cta"
style={{
display: 'inline-flex', alignItems: 'center', gap: '10px',
fontFamily: 'Manrope, sans-serif',
fontSize: '11px', letterSpacing: '0.24em', textTransform: 'uppercase',
padding: '12px 20px', border: '1px solid var(--ink)', color: 'var(--ink)'
}}>
INQUIRY →
) : (
)}
{/* Mobile full-screen menu */}
{isMobile && (
)}
);
}
Object.assign(window, { Nav });