76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
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 });
|
|
}
|
|
});
|