${item.title}

${item.subLinks.map(sub => ` ${sub.icon} ${sub.label} `).join('')}

`).join(''); const desktopNavHTML = navData.map(item => `

${item.title}

`).join('') + `

${megaCols}

`; const mobSections = navData.map(item => `

${item.title}

${item.subLinks.map(sub => `${sub.micon}${sub.label}`).join('')}

`).join(''); const mobileDrawerHTML = `

${mobSections}

`; const headerHTML = `

`; // ============================================================ // 4. INJECT // ============================================================ const initNavbar = () => { // Inject styles const style = document.createElement('style'); style.textContent = css; document.head.appendChild(style); // Google Font // Header element const header = document.createElement('header'); header.className = 'pz-header theme-light'; header.innerHTML = headerHTML; document.body.prepend(header); // Spacer so page content doesn't hide under fixed nav const spacer = document.createElement('div'); spacer.style.cssText = `height: 64px; display: block;`; document.body.insertBefore(spacer, header.nextSibling); // Mobile overlay + drawer const overlay = document.createElement('div'); overlay.className = 'pz-mobile-overlay'; document.body.appendChild(overlay); const drawer = document.createElement('div'); drawer.className = 'pz-mobile-drawer'; drawer.innerHTML = mobileDrawerHTML; document.body.appendChild(drawer); // ============================================================ // 5. SECTION-AWARE COLOR DETECTION // ============================================================ /** * Sample a small horizontal strip at Y = navHeight/2 of the * visible area to determine the luminance of what's behind the navbar. * Strategy: Collect all elements whose bounding box overlaps * the navbar's centre-line, read their computed background-color, * blend them top-to-bottom and compute relative luminance. */ let currentTheme = 'light'; const getLuminance = (r, g, b) => { const sRGB = [r, g, b].map(v => { v /= 255; return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); return 0.2126 * sRGB[0] + 0.7152 * sRGB[1] + 0.0722 * sRGB[2]; }; const parseColor = (colorStr) => { if (!colorStr || colorStr === 'transparent' || colorStr === 'rgba(0, 0, 0, 0)') return null; const m = colorStr.match(/rgba?$(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?$/); if (!m) return null; const alpha = m[4] !== undefined ? parseFloat(m[4]) : 1; if (alpha < 0.05) return null; // nearly transparent — skip return { r: +m[1], g: +m[2], b: +m[3], a: alpha }; }; const blendOnWhite = (colors) => { // Composite color list (front to back) onto white let r = 255, g = 255, b = 255; for (let i = colors.length - 1; i >= 0; i--) { const c = colors[i]; const a = c.a; r = c.r * a + r * (1 - a); g = c.g * a + g * (1 - a); b = c.b * a + b * (1 - a); } return { r, g, b }; }; const detectTheme = () => { const navH = parseInt(getComputedStyle(header).height) || 64; const sampleY = window.scrollY + navH * 0.5; // Walk the DOM and collect elements whose bbox vertically overlaps sampleY const all = document.body.querySelectorAll('*'); const colors = []; for (let el of all) { // Skip the navbar itself if (header.contains(el) || el === header) continue; if (el === spacer || el === overlay || el === drawer) continue; const rect = el.getBoundingClientRect(); const absTop = rect.top + window.scrollY; const absBottom = rect.bottom + window.scrollY; // Must straddle the sample line if (absTop > sampleY || absBottom < sampleY) continue; // Must span the full width (rough heuristic for section-level elements) if (rect.width < window.innerWidth * 0.4) continue; const bg = window.getComputedStyle(el).backgroundColor; const parsed = parseColor(bg); if (parsed) colors.push(parsed); } let lum; if (colors.length === 0) { // Fallback: check body const bodyBg = parseColor(window.getComputedStyle(document.body).backgroundColor); lum = bodyBg ? getLuminance(bodyBg.r, bodyBg.g, bodyBg.b) : 1; } else { const blended = blendOnWhite(colors); lum = getLuminance(blended.r, blended.g, blended.b); } // Luminance threshold: >0.35 = light background, ≤0.35 = dark background const newTheme = lum > 0.35 ? 'light' : 'dark'; if (newTheme !== currentTheme) { currentTheme = newTheme; header.classList.remove('theme-light', 'theme-dark'); header.classList.add(`theme-${newTheme}`); } }; // Run detection frequently but efficiently let ticking = false; const onScroll = () => { if (!ticking) { requestAnimationFrame(() => { detectTheme(); // Scrolled glass effect if (window.scrollY > 10) { header.classList.add('pz-scrolled'); } else { header.classList.remove('pz-scrolled'); } ticking = false; }); ticking = true; } }; window.addEventListener('scroll', onScroll, { passive: true }); detectTheme(); // Initial run // Re-detect after images / fonts load (they may affect section heights) window.addEventListener('load', detectTheme); // Mega panel is CSS :hover driven — no JS needed for desktop open/close // Close on outside click (accessibility) document.addEventListener('click', (e) => { if (!header.contains(e.target)) { header.querySelectorAll('.pz-nav-item').forEach(i => i.classList.remove('pz-open')); } }); // ============================================================ // 7. MOBILE MENU // ============================================================ const hamburger = header.querySelector('.pz-hamburger'); const closeMobile = () => { hamburger.classList.remove('pz-active'); hamburger.setAttribute('aria-expanded', 'false'); overlay.classList.remove('pz-active'); drawer.classList.remove('pz-active'); document.body.style.overflow = ''; }; hamburger.addEventListener('click', () => { const isOpen = drawer.classList.contains('pz-active'); if (isOpen) { closeMobile(); } else { hamburger.classList.add('pz-active'); hamburger.setAttribute('aria-expanded', 'true'); overlay.classList.add('pz-active'); drawer.classList.add('pz-active'); document.body.style.overflow = 'hidden'; } }); overlay.addEventListener('click', closeMobile); // Close button inside drawer const mobCloseBtn = drawer.querySelector('#pzMobClose'); if (mobCloseBtn) mobCloseBtn.addEventListener('click', closeMobile); // Accordion in drawer const mobileSections = drawer.querySelectorAll('.pz-mobile-section'); mobileSections.forEach(section => { const title = section.querySelector('.pz-mobile-section-title'); title.addEventListener('click', () => { const isOpen = section.classList.contains('pz-open'); mobileSections.forEach(s => s.classList.remove('pz-open')); if (!isOpen) section.classList.add('pz-open'); }); }); window.addEventListener('resize', () => { if (window.innerWidth >= 992) closeMobile(); }); // Close mobile on link click drawer.querySelectorAll('.pz-mobile-link').forEach(link => { link.addEventListener('click', closeMobile); }); }; // ============================================================ // 8. BOOT // ============================================================ if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initNavbar); } else { initNavbar(); } })();