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 });
+    }
+});

public/js/theme.js

@@ -0,0 +1,64 @@
+// Theme handling
+function initTheme() {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const savedTheme = localStorage.getItem('theme');
+    
+    if (savedTheme) {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        updateThemeIcon(savedTheme);
+    } else if (prefersDark) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        updateThemeIcon('dark');
+    }
+}
+
+function toggleTheme() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateThemeIcon(newTheme);
+}
+
+function updateThemeIcon(theme) {
+    const themeIcon = document.querySelector('.theme-toggle i');
+    if (themeIcon) {
+        themeIcon.className = theme === 'dark' 
+            ? 'fas fa-sun' 
+            : 'fas fa-moon';
+    }
+}
+
+// Mobile menu handling
+function toggleMobileMenu() {
+    const navMenu = document.querySelector('.nav-menu');
+    navMenu.classList.toggle('active');
+    
+    const menuIcon = document.querySelector('.mobile-menu-toggle i');
+    menuIcon.className = navMenu.classList.contains('active')
+        ? 'fas fa-times'
+        : 'fas fa-bars';
+}
+
+// Initialize on load
+document.addEventListener('DOMContentLoaded', () => {
+    initTheme();
+    
+    // Add click handlers
+    document.querySelector('.theme-toggle')?.addEventListener('click', toggleTheme);
+    document.querySelector('.mobile-menu-toggle')?.addEventListener('click', toggleMobileMenu);
+    
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (e) => {
+        const navMenu = document.querySelector('.nav-menu');
+        const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+        
+        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';
+        }
+    });
+});