7sys

public/js/components.js

@@ -0,0 +1,75 @@
+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 });
+    }
+});