// Nav v4. Floating glass capsule, magnetic active indicator, Space Grotesk wordmark const { useState: useNavState, useEffect: useNavEffect, useRef: useNavRef } = React; function Nav({ theme, toggleTheme }) { const [scrolled, setScrolled] = useNavState(false); const [activeId, setActiveId] = useNavState(null); const [mobileOpen, setMobileOpen] = useNavState(false); const indicatorRef = useNavRef(null); const linksWrapRef = useNavRef(null); const isDark = theme === 'dark'; const navLinks = [ { label: 'Work', href: '#work', id: 'work' }, { label: 'Industries', href: '#industries', id: 'industries' }, { label: 'Services', href: '#services', id: 'services' }, { label: 'Process', href: '#process', id: 'process' }, { label: 'Pricing', href: '#pricing', id: 'pricing' }, ]; useNavEffect(() => { const h = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', h, { passive: true }); return () => window.removeEventListener('scroll', h); }, []); // Track which section is in view, moves the magnetic indicator useNavEffect(() => { const sections = navLinks .map(l => document.getElementById(l.id)) .filter(Boolean); if (!sections.length) return; const obs = new IntersectionObserver(entries => { const visible = entries .filter(e => e.isIntersecting) .sort((a,b) => b.intersectionRatio - a.intersectionRatio); if (visible.length) setActiveId(visible[0].target.id); }, { rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1], }); sections.forEach(s => obs.observe(s)); return () => obs.disconnect(); }, []); // Slide the magnetic indicator under the active link useNavEffect(() => { if (!indicatorRef.current || !linksWrapRef.current || !activeId) return; const activeLink = linksWrapRef.current.querySelector(`[data-link="${activeId}"]`); if (!activeLink) return; const rect = activeLink.getBoundingClientRect(); const wrapRect = linksWrapRef.current.getBoundingClientRect(); // Position offset relative to the capsule's content box const offsetX = rect.left - wrapRect.left; indicatorRef.current.style.width = `${rect.width}px`; indicatorRef.current.style.height = `${rect.height}px`; indicatorRef.current.style.transform = `translate(${offsetX}px, -50%)`; indicatorRef.current.style.opacity = '1'; }, [activeId]); const glassBg = isDark ? 'rgba(20,20,26,0.62)' : 'rgba(255,255,255,0.72)'; const glassBgSoft = isDark ? 'rgba(20,20,26,0.42)' : 'rgba(255,255,255,0.55)'; const glassBdr = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(10,10,18,0.08)'; const linkColor = isDark ? 'rgba(255,255,255,0.72)' : 'rgba(10,10,18,0.65)'; const linkHover = isDark ? 'rgba(255,255,255,0.95)' : 'rgba(10,10,18,0.95)'; return ( ); } Object.assign(window, { Nav });