const { useState, useEffect, useRef } = React; const NAV_GROUPS = [ { label: 'Learn', items: [ { name: 'Tutorials', url: 'tutorials.html' }, { name: 'Ethics', url: 'ethics.html' } ] }, { label: 'Planning', items: [ { name: 'Ephemeris', url: 'planning.html' }, { name: 'Calendar', url: 'Calendar.html' }, { name: 'Weather', url: 'weather.html' }, { name: 'Itinerary', url: 'itinerary.html' } ] }, { label: 'Explore', items: [ { name: 'Locations', url: 'explore.html' }, { name: 'Routes', url: 'routes.html', subItems: [ { name: 'Map', url: 'routes.html' }, { name: 'Short', url: 'walks_short.html' }, { name: 'Medium', url: 'walks_medium.html' }, { name: 'Long', url: 'walks_long.html' } ] } ] } ]; const NAV_HOME = { name: 'Home', url: 'index.html' }; const NAV_WORKSHOPS = { name: 'Workshops', url: 'workshops.html' }; const normaliseNavPath = (value) => { const clean = (value || '').split('#')[0].split('?')[0].split('/').pop().toLowerCase(); return clean || 'index.html'; }; const isNavItemActive = (item, currentPath) => { if (normaliseNavPath(item.url) === currentPath) return true; if (item.subItems) { return item.subItems.some(sub => normaliseNavPath(sub.url) === currentPath); } return false; }; const isNavGroupActive = (group, currentPath) => group.items.some(item => isNavItemActive(item, currentPath)); const Navbar = () => { const [isOpen, setIsOpen] = useState(false); const [activeDropdown, setActiveDropdown] = useState(null); const [activeSubDropdown, setActiveSubDropdown] = useState(null); const [expandedMobileSub, setExpandedMobileSub] = useState(null); const [currentPath, setCurrentPath] = useState(''); const dropdownTimer = useRef(null); useEffect(() => { setCurrentPath(normaliseNavPath(window.location.pathname)); }, []); const closeMenus = () => { setIsOpen(false); setActiveDropdown(null); setActiveSubDropdown(null); setExpandedMobileSub(null); }; const handleMouseEnter = (label) => { if (dropdownTimer.current) clearTimeout(dropdownTimer.current); setActiveDropdown(label); }; const handleMouseLeave = () => { dropdownTimer.current = setTimeout(() => { setActiveDropdown(null); setActiveSubDropdown(null); }, 300); }; const homeActive = isNavItemActive(NAV_HOME, currentPath); const workshopsActive = isNavItemActive(NAV_WORKSHOPS, currentPath); return ( ); };