import React, { useState, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { Menu, X } from 'lucide-react'; const NAV_LINKS = [ { id: 'circuits', label: 'Circuits' }, { id: 'patching', label: 'Patching' }, { id: 'monosemanticity', label: 'Monosemanticity' }, { id: 'alignment', label: 'Alignment' }, { id: 'attention', label: 'Attention' }, { id: 'failures', label: 'Findings' }, { id: 'blog', label: 'Blog' }, ]; export const Nav = () => { const [scrolled, setScrolled] = useState(false); const [active, setActive] = useState(''); const [mobileOpen, setMobileOpen] = useState(false); const navigate = useNavigate(); const location = useLocation(); const isHomePage = location.pathname === '/'; const [modelStatus, setModelStatus] = useState('active'); useEffect(() => { sessionStorage.setItem('cs_model_status', 'active'); window.dispatchEvent(new CustomEvent('cs_model_status_change', { detail: 'active' })); }, []); useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); const sections = NAV_LINKS.map(l => document.getElementById(l.id)); for (let i = sections.length - 1; i >= 0; i--) { if (sections[i] && sections[i].getBoundingClientRect().top < 150) { setActive(NAV_LINKS[i].id); break; } } }; window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []); const scrollTo = (id) => { if (!isHomePage) { navigate('/'); setTimeout(() => { document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); }, 100); } else { document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); } setMobileOpen(false); }; return ( ); };