|
| 1 | +import { useState, useEffect } from 'react'; |
| 2 | +import { LinkItem } from '../types/types'; |
| 3 | + |
| 4 | +/** |
| 5 | + * Tracks the currently active navbar section based on scroll position and URL hash. |
| 6 | + * Uses IntersectionObserver for smooth scroll-spy on the home page and listens to |
| 7 | + * hashchange/click events for Next.js client-side transitions. |
| 8 | + * |
| 9 | + * @returns `activeSection` - the ID of the section in view, and `isActive` - a helper |
| 10 | + * that checks whether a given nav link should be highlighted. |
| 11 | + */ |
| 12 | +export function useSectionTracker(pathname: string) { |
| 13 | + const [activeSection, setActiveSection] = useState<string>(''); |
| 14 | + |
| 15 | + useEffect(() => { |
| 16 | + // 1. Initialize active hash from window.location.hash |
| 17 | + const updateHash = () => { |
| 18 | + const hash = window.location.hash.replace('#', ''); |
| 19 | + if (hash) { |
| 20 | + setActiveSection(hash); |
| 21 | + } |
| 22 | + }; |
| 23 | + updateHash(); |
| 24 | + |
| 25 | + // 2. Click listener for Next.js soft transitions |
| 26 | + const handleDocumentClick = () => { |
| 27 | + setTimeout(updateHash, 50); |
| 28 | + }; |
| 29 | + |
| 30 | + // 3. Scroll spy listener using IntersectionObserver on home page |
| 31 | + let observer: IntersectionObserver | null = null; |
| 32 | + if (pathname === '/') { |
| 33 | + const sections = ['about', 'speakers', 'tickets', 'sponsors']; |
| 34 | + const elements = sections |
| 35 | + .map((id) => document.getElementById(id)) |
| 36 | + .filter(Boolean) as HTMLElement[]; |
| 37 | + |
| 38 | + if (elements.length > 0) { |
| 39 | + observer = new IntersectionObserver( |
| 40 | + (entries) => { |
| 41 | + entries.forEach((entry) => { |
| 42 | + if (entry.isIntersecting) { |
| 43 | + setActiveSection(entry.target.id); |
| 44 | + } |
| 45 | + }); |
| 46 | + }, |
| 47 | + { |
| 48 | + root: null, |
| 49 | + rootMargin: '-30% 0px -50% 0px', |
| 50 | + threshold: 0, |
| 51 | + } |
| 52 | + ); |
| 53 | + elements.forEach((el) => observer?.observe(el)); |
| 54 | + } |
| 55 | + } else { |
| 56 | + setActiveSection(''); |
| 57 | + } |
| 58 | + |
| 59 | + // 4. Scroll position tracking: if scrolled to the top, reset active state |
| 60 | + const handleScroll = () => { |
| 61 | + if (window.scrollY < 100 && pathname === '/') { |
| 62 | + setActiveSection(''); |
| 63 | + } |
| 64 | + }; |
| 65 | + |
| 66 | + window.addEventListener('hashchange', updateHash); |
| 67 | + document.addEventListener('click', handleDocumentClick); |
| 68 | + window.addEventListener('scroll', handleScroll, { passive: true }); |
| 69 | + |
| 70 | + return () => { |
| 71 | + window.removeEventListener('hashchange', updateHash); |
| 72 | + document.removeEventListener('click', handleDocumentClick); |
| 73 | + window.removeEventListener('scroll', handleScroll); |
| 74 | + if (observer) { |
| 75 | + observer.disconnect(); |
| 76 | + } |
| 77 | + }; |
| 78 | + }, [pathname]); |
| 79 | + |
| 80 | + const isActive = (link: LinkItem): boolean => { |
| 81 | + if (link.ref.includes('#')) { |
| 82 | + const [path, hash] = link.ref.split('#'); |
| 83 | + const isCorrectPath = pathname === (path || '/'); |
| 84 | + const isCorrectHash = activeSection === hash; |
| 85 | + return isCorrectPath && isCorrectHash; |
| 86 | + } |
| 87 | + if (link.ref === pathname) return true; |
| 88 | + if (link.subMenu) { |
| 89 | + return link.subMenu.some((sub) => { |
| 90 | + if (sub.ref.includes('#')) { |
| 91 | + const [path, hash] = sub.ref.split('#'); |
| 92 | + return pathname === (path || '/') && activeSection === hash; |
| 93 | + } |
| 94 | + return sub.ref === pathname; |
| 95 | + }); |
| 96 | + } |
| 97 | + return false; |
| 98 | + }; |
| 99 | + |
| 100 | + return { activeSection, isActive }; |
| 101 | +} |
0 commit comments