web7sys/public-pre/js/components.js

document.addEventListener('DOMContentLoaded', function() {
    // Helper function to handle component loading
    async function loadComponent(url, insertPosition) {
        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            const data = await response.text();
            document.body.insertAdjacentHTML(insertPosition, data);

            // After header is loaded, initialize its event listeners
            if (url.includes('header.html')) {
                initializeHeader();
            }
        } catch (error) {
            console.warn(`Failed to load component from ${url}:`, error);
        }
    }

    // Load components with error handling
    Promise.all([
        loadComponent('components/header.html', 'afterbegin'),
        loadComponent('components/footer.html', 'beforeend')
    ]).catch(error => {
        console.warn('Error loading components:', error);
    });

    // Initialize header functionality after it's loaded
    function initializeHeader() {
        const header = document.querySelector('header');
        const mobileMenuToggle = header.querySelector('.mobile-menu-toggle');
        const navMenu = header.querySelector('.nav-menu');

        // Mobile menu toggle
        if (mobileMenuToggle && navMenu) {
            mobileMenuToggle.addEventListener('click', () => {
                navMenu.classList.toggle('active');
                const menuIcon = mobileMenuToggle.querySelector('i');
                menuIcon.className = navMenu.classList.contains('active')
                    ? 'fas fa-times'
                    : 'fas fa-bars';
            });

            // Close menu when clicking outside
            document.addEventListener('click', (e) => {
                if (navMenu.classList.contains('active') &&
                    !e.target.closest('.nav-menu') &&
                    !e.target.closest('.mobile-menu-toggle')) {
                    navMenu.classList.remove('active');
                    mobileMenuToggle.querySelector('i').className = 'fas fa-bars';
                }
            });
        }

        // Scroll behavior
        let lastScrollTop = 0;
        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            // Don't hide header when near top of page
            if (scrollTop < 100) {
                header.style.transform = 'translateY(0)';
                return;
            }
            
            // Hide header on scroll down, show on scroll up
            if (scrollTop > lastScrollTop) {
                header.style.transform = 'translateY(-100%)';
            } else {
                header.style.transform = 'translateY(0)';
            }
            
            lastScrollTop = scrollTop;
        }, { passive: true });
    }
});