diff --git a/src/hooks/useActiveSection.ts b/src/hooks/useActiveSection.ts index b1b06f3..ac35ae7 100644 --- a/src/hooks/useActiveSection.ts +++ b/src/hooks/useActiveSection.ts @@ -1,13 +1,18 @@ import { useState, useEffect, useCallback, useRef } from 'react' -const sectionTileMap: Record = { - 'patient-summary': 'overview', - 'section-experience': 'experience', - 'section-skills': 'skills', -} +const MOBILE_NAV_QUERY = '(max-width: 599px)' const SCROLL_BOTTOM_THRESHOLD = 40 +function buildSectionTileMap(isMobile: boolean): Record { + return { + 'mobile-overview': 'overview', + 'patient-summary': isMobile ? 'summary' : 'overview', + 'section-experience': 'experience', + 'section-skills': 'skills', + } +} + /** * Hook to track which section is currently visible using IntersectionObserver. * Observes tiles by their data-tile-id attribute inside main scroll content. @@ -20,6 +25,7 @@ const SCROLL_BOTTOM_THRESHOLD = 40 export function useActiveSection(): string { const [activeSection, setActiveSection] = useState('overview') const scrollOverrideRef = useRef(null) + const sectionTileMapRef = useRef(buildSectionTileMap(window.matchMedia(MOBILE_NAV_QUERY).matches)) const updateFromScroll = useCallback((root: HTMLElement) => { const { scrollTop, scrollHeight, clientHeight } = root @@ -37,6 +43,15 @@ export function useActiveSection(): string { } }, []) + useEffect(() => { + const mq = window.matchMedia(MOBILE_NAV_QUERY) + const handleChange = (e: MediaQueryListEvent) => { + sectionTileMapRef.current = buildSectionTileMap(e.matches) + } + mq.addEventListener('change', handleChange) + return () => mq.removeEventListener('change', handleChange) + }, []) + useEffect(() => { const tiles = Array.from( document.querySelectorAll('[data-tile-id]') @@ -57,8 +72,8 @@ export function useActiveSection(): string { ) const tileId = mostVisible.target.getAttribute('data-tile-id') - if (tileId && sectionTileMap[tileId]) { - setActiveSection(sectionTileMap[tileId]) + if (tileId && sectionTileMapRef.current[tileId]) { + setActiveSection(sectionTileMapRef.current[tileId]) } }, {