function Nav({ theme }) {
const [open, setOpen] = React.useState(false);
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const items = [
{ label: 'Work', href: '#work' },
{ label: 'About', href: '#about' },
{ label: 'Patreon', href: '#patreon' },
];
const barStyle = {
position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
backdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'blur(0px)',
WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'blur(0px)',
background: scrolled ? 'color-mix(in oklab, var(--bg) 78%, transparent)' : 'transparent',
borderBottom: scrolled ? '1px solid var(--divider)' : '1px solid transparent',
transition: 'background .35s ease, border-color .35s ease, backdrop-filter .35s ease',
};
return (
Koelet3D
Join Patreon
);
}
const socialIconStyle = {
display: 'flex', alignItems: 'center', justifyContent: 'center',
width: 32, height: 32, borderRadius: 8,
color: 'var(--fg-soft)', transition: 'color .2s ease, background .2s ease',
};
const navLinkStyle = {
fontSize: 13.5, letterSpacing: 0.02, color: 'var(--fg)', fontWeight: 400, transition: 'color .2s ease',
};
function XIcon() {
return (
);
}
function BlueskyIcon() {
return (
);
}
function ArrowUpRight() {
return (
);
}
function MenuIcon({ open }) {
return (
);
}
window.Nav = Nav;