// nav.jsx — Fixed top navigation + mobile fullscreen menu
const { useState, useEffect } = React;
// Each nav item keeps a stable id (used for routing) + a translation key (used for display).
const NAV_ITEMS = [
{ id: 'Studio', key: 'nav.studio' },
{ id: 'Works', key: 'nav.works' },
{ id: 'Services', key: 'nav.services' },
{ id: 'Get In Touch', key: 'nav.contact' },
];
// Menu social icons (inherit currentColor)
function MmVimeo() {
return (
);
}
function MmInstagram() {
return (
);
}
function MmLinkedIn() {
return (
);
}
function Nav({ view, setView, scrollToSection }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [lang] = useLang();
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 60);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
document.body.classList.toggle('menu-open', menuOpen);
if (!menuOpen) return;
// Lock background scroll WITHOUT any layout change. Toggling overflow/position
// on / reflows the page, and on mobile that reflow (dynamic toolbar
// / viewport recompute) shifted the still-visible fixed nav — the logo, lang
// switch and burger jumped upward as the menu faded in. A non-passive
// touchmove/wheel guard freezes scrolling with zero geometry change instead.
const prevent = (e) => {
const menu = document.querySelector('.mmenu');
// let the menu itself scroll on short viewports where it overflows
if (menu && menu.contains(e.target) && menu.scrollHeight > menu.clientHeight) return;
e.preventDefault();
};
window.addEventListener('touchmove', prevent, { passive: false });
window.addEventListener('wheel', prevent, { passive: false });
return () => {
window.removeEventListener('touchmove', prevent, { passive: false });
window.removeEventListener('wheel', prevent, { passive: false });
document.body.classList.remove('menu-open');
};
}, [menuOpen]);
const handleNavClick = (item) => {
setMenuOpen(false);
if (item === 'Works') {
setView('works');
} else if (item === 'Studio') {
setView('home');
scrollToSection && scrollToSection('about');
} else if (item === 'Services') {
setView('home');
scrollToSection && scrollToSection('services');
} else if (item === 'Get In Touch') {
setView('home');
scrollToSection && scrollToSection('contact');
}
};
return (
<>
{/* Mobile fullscreen menu */}
);
}
function LangSwitch() {
const [lang, setLang] = useLang();
return (
{RB_LANGS.map((l, i) => (
{i === 1 && /}
))}
);
}
function NavLink({ label, active, onClick }) {
const [hovered, setHovered] = useState(false);
const lit = hovered || active;
return (
);
}
function LogoMark({ size = 17, color = '#ffffff' }) {
// Official ROBUST wordmark — viewBox 850.41 × 112.79 (≈7.54:1)
return (
);
}
Object.assign(window, { Nav, LogoMark });