// Mobile nav highlighting const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); if (mobileNavLinks.length > 0) { // Click handler for mobile nav mobileNavLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetEl = document.querySelector(targetId); if (targetEl) { mobileNavLinks.forEach(l => l.classList.remove('active')); this.classList.add('active'); const container = this.parentElement; if (container) { const target = this.offsetLeft - (container.clientWidth - this.offsetWidth) / 2; const max = container.scrollWidth - container.clientWidth; container.scrollTo({ left: Math.max(0, Math.min(max, target)), behavior: 'smooth' }); } scrollPageToNavTarget(targetEl); } else { const dash = document.querySelector('#dashboard'); if (dash) scrollPageToNavTarget(dash); } }); }); // Scroll-based highlighting for mobile nav let lastActiveMobileId = null; function setActiveMobileNav() { const scrollPosition = window.scrollY; const windowHeight = window.innerHeight; const viewportTrigger = scrollPosition + windowHeight * 0.33; const trackedIds = Array.from(mobileNavLinks) .map(l => l.getAttribute('href').replace('#', '')) .filter(id => document.getElementById(id) !== null); let activeId = trackedIds[0]; for (let i = 0; i < trackedIds.length; i++) { const el = document.getElementById(trackedIds[i]); if (el && el.offsetTop <= viewportTrigger) { activeId = trackedIds[i]; } else { break; } } const activeChanged = activeId !== lastActiveMobileId; lastActiveMobileId = activeId; let activeLink = null; mobileNavLinks.forEach(l => { l.classList.remove('active'); if (l.getAttribute('href') === '#' + activeId) { l.classList.add('active'); activeLink = l; } }); // Only scroll the nav bar horizontally, and only when the active // pill actually changes — avoids feedback loops with page scroll. if (activeChanged && activeLink) { const container = activeLink.parentElement; if (container) { const target = activeLink.offsetLeft - (container.clientWidth - activeLink.offsetWidth) / 2; const max = container.scrollWidth - container.clientWidth; container.scrollTo({ left: Math.max(0, Math.min(max, target)), behavior: 'smooth' }); } } } window.addEventListener('scroll', setActiveMobileNav, { passive: true }); setActiveMobileNav(); }