{index != null && (
{index}
)}
{caption && (
{caption}
)}
{children}
);
}
/* Wordmark */
function Wordmark({ inverse = false, size = 22 }) {
return (
{BRAND.name}.
);
}
const NAV = [
{ id: 'work', label: 'work' },
{ id: 'apps', label: 'ai_labo' },
{ id: 'gallery', label: 'moments' },
{ id: 'about', label: 'about' },
];
function TopNav({ route, go, inverse = false, overlay = false, showAvailable = true, hidden = false }) {
const [hover, setHover] = React.useState(null);
const [open, setOpen] = React.useState(false); // mobile menu
const dark = inverse || overlay;
const fg = dark ? '#fff' : 'var(--text-primary)';
const muted = dark ? 'rgba(255,255,255,.62)' : 'var(--text-secondary)';
const goClose = (id) => { setOpen(false); go(id); };
// Sliding underline. Over a link it snaps to that link; in the gaps BETWEEN
// links it glides with the cursor; off the nav it springs back to the active
// section (ai_labo stays active on its detail pages, work on case studies).
const navRef = React.useRef(null);
const btnRefs = React.useRef({});
const activeNav = NAV.find(n => route === n.id
|| (n.id === 'work' && route === 'case')
|| (n.id === 'apps' && route === 'app'));
const activeId = activeNav ? activeNav.id : null;
const [navHover, setNavHover] = React.useState(false);
const [ind, setInd] = React.useState({ left: 0, width: 0, visible: false, follow: false });
const toActive = React.useCallback(() => {
const el = activeId ? btnRefs.current[activeId] : null;
if (el) setInd({ left: el.offsetLeft, width: el.offsetWidth, visible: true, follow: false });
else setInd(prev => ({ ...prev, visible: false, follow: false }));
}, [activeId]);
// When the cursor isn't in the nav, park the bar under the active section.
React.useLayoutEffect(() => { if (!navHover) toActive(); }, [navHover, toActive, route, dark, showAvailable]);
React.useEffect(() => {
const onR = () => { if (!navHover) toActive(); };
window.addEventListener('resize', onR);
return () => window.removeEventListener('resize', onR);
}, [navHover, toActive]);
const onNavMove = (e) => {
const nav = navRef.current; if (!nav) return;
const x = e.clientX - nav.getBoundingClientRect().left;
const items = NAV.map(n => btnRefs.current[n.id]).filter(Boolean);
if (items.length === 0) return;
const first = items[0];
const last = items[items.length - 1];
// Outside the run of links (e.g. over the 'available' tag): snap to active.
if (x < first.offsetLeft || x > last.offsetLeft + last.offsetWidth) { toActive(); return; }
// Directly over a link: snap to it.
let onBtn = null;
for (const b of items) {
if (x >= b.offsetLeft && x <= b.offsetLeft + b.offsetWidth) { onBtn = b; break; }
}
if (onBtn) { setInd({ left: onBtn.offsetLeft, width: onBtn.offsetWidth, visible: true, follow: false }); return; }
// In a gap: glide continuously between the two neighbouring links, morphing
// position + width across the gap so the bar travels with the cursor.
let prev = first, next = last;
for (const b of items) {
if (b.offsetLeft + b.offsetWidth <= x) prev = b; // last link fully left of cursor
if (b.offsetLeft >= x) { next = b; break; } // first link fully right of cursor
}
const prevRight = prev.offsetLeft + prev.offsetWidth;
const span = Math.max(1, next.offsetLeft - prevRight);
const tt = Math.min(1, Math.max(0, (x - prevRight) / span));
const left = prev.offsetLeft + (next.offsetLeft - prev.offsetLeft) * tt;
const width = prev.offsetWidth + (next.offsetWidth - prev.offsetWidth) * tt;
setInd({ left, width, visible: true, follow: true });
};
return (
{NAV.map(n => (
))}
)}
{title}