// Nav.jsx — Top bar that becomes a floating pill on scroll
const Nav = ({ route, go, scrolled }) => {
const t = useT();
const { lang, setLang } = useLang();
const [mobileOpen, setMobileOpen] = React.useState(false);
// Close mobile menu on route change
React.useEffect(() => { setMobileOpen(false); }, [route]);
// Lock body scroll while open
React.useEffect(() => {
if (mobileOpen) {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}
}, [mobileOpen]);
const linkBase = {
fontFamily: "'JetBrains Mono', monospace",
fontSize: 13,
letterSpacing: '1.4px',
textTransform: 'uppercase',
color: '#fff',
textDecoration: 'none',
cursor: 'pointer',
background: 'transparent',
border: 0,
padding: 0,
transition: 'opacity 250ms cubic-bezier(0.4,0,0.2,1)',
};
const NavLink = ({ to, children, onClick }) => {
const active = route === to;
const [hover, setHover] = React.useState(false);
return (
{ e.preventDefault(); if (onClick) onClick(); go(to); }}
href={`#/${to}`}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
...linkBase,
opacity: active ? 1 : (hover ? 0.75 : 0.85),
position: 'relative',
paddingBottom: 4,
borderBottom: active ? '1px solid #fff' : '1px solid transparent',
}}
>
{children}
);
};
// Language dropdown — compact, monospace, opens on click, dismisses on outside click / Esc.
const LangSwitch = ({ variant = 'inline' }) => {
const [open, setOpen] = React.useState(false);
const [hover, setHover] = React.useState(false);
const wrapRef = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const onDocClick = (e) => {
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
document.addEventListener('mousedown', onDocClick);
document.addEventListener('keydown', onKey);
return () => {
document.removeEventListener('mousedown', onDocClick);
document.removeEventListener('keydown', onKey);
};
}, [open]);
const langs = [
{ code: 'en', label: 'EN' },
{ code: 'de', label: 'DE' },
];
const currentLabel = langs.find(l => l.code === lang)?.label || 'EN';
return (
{open && (
{langs.map((l) => {
const active = l.code === lang;
return (
-
);
})}
)}
);
};
const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
// Outer wrapper: always fixed full-width, flush at the top. No floating gutters.
const outerStyle = {
position: 'fixed',
top: 0, left: 0, right: 0,
zIndex: 50,
pointerEvents: 'none',
};
const innerStyle = {
display: 'grid',
gridTemplateColumns: 'auto 1fr auto',
alignItems: 'center',
background: (scrolled || mobileOpen) ? 'rgba(20,20,20,0.55)' : 'transparent',
borderBottom: (scrolled || mobileOpen) ? '1px solid rgba(255,255,255,0.12)' : '1px solid transparent',
boxShadow: scrolled ? '0 12px 40px rgba(0,0,0,0.35)' : 'none',
backdropFilter: (scrolled || mobileOpen) ? 'blur(20px) saturate(160%)' : 'none',
WebkitBackdropFilter: (scrolled || mobileOpen) ? 'blur(20px) saturate(160%)' : 'none',
pointerEvents: 'auto',
transition: [
`background 350ms ${EASE}`,
`border-color 350ms ${EASE}`,
`box-shadow 350ms ${EASE}`,
`backdrop-filter 350ms ${EASE}`,
].join(', '),
};
// Hamburger icon (morphs into X when open)
const Hamburger = () => (
);
return (
{/* Mobile full-screen menu */}
{ e.preventDefault(); setMobileOpen(false); go('home'); }}
style={{
fontFamily: "'Archivo Black', sans-serif",
fontSize: 44, lineHeight: 1.0, letterSpacing: '-0.02em',
color: '#fff', textDecoration: 'none', fontWeight: 400,
opacity: route === 'home' ? 1 : 0.78,
}}
>{t('nav.home')}
{ e.preventDefault(); setMobileOpen(false); go('careers'); }}
style={{
fontFamily: "'Archivo Black', sans-serif",
fontSize: 44, lineHeight: 1.0, letterSpacing: '-0.02em',
color: '#fff', textDecoration: 'none', fontWeight: 400,
opacity: route === 'careers' ? 1 : 0.78,
}}
>{t('nav.careers')}
);
};
window.Nav = Nav;