96 lines
No EOL
3.4 KiB
JavaScript
96 lines
No EOL
3.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// Mobile navigation toggle functionality
|
|
const navToggle = document.getElementById('navToggle');
|
|
const navMenu = document.getElementById('navMenu');
|
|
const headerNav = document.getElementById('headerNav');
|
|
const topLine = document.getElementById('topLine');
|
|
const middleLine = document.getElementById('middleLine');
|
|
const bottomLine = document.getElementById('bottomLine');
|
|
|
|
let isMenuOpen = false;
|
|
|
|
// Toggle mobile menu
|
|
navToggle.addEventListener('click', function () {
|
|
isMenuOpen = !isMenuOpen;
|
|
|
|
// Toggle menu visibility classes
|
|
if (isMenuOpen) {
|
|
navMenu.classList.remove('nav__menu-hidden');
|
|
navMenu.classList.add('nav__menu-active');
|
|
navToggle.setAttribute('aria-expanded', 'true');
|
|
|
|
// Animate hamburger to X
|
|
topLine.classList.add('svg-line-top');
|
|
middleLine.classList.add('svg-line-center');
|
|
bottomLine.classList.add('svg-line-bottom');
|
|
} else {
|
|
navMenu.classList.remove('nav__menu-active');
|
|
navMenu.classList.add('nav__menu-hidden');
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
|
|
// Animate X back to hamburger
|
|
topLine.classList.remove('svg-line-top');
|
|
middleLine.classList.remove('svg-line-center');
|
|
bottomLine.classList.remove('svg-line-bottom');
|
|
}
|
|
});
|
|
|
|
// Close menu when clicking on menu items (mobile)
|
|
const menuItems = navMenu.querySelectorAll('.menu__item-link');
|
|
menuItems.forEach(function (item) {
|
|
item.addEventListener('click', function () {
|
|
if (window.innerWidth < 992 && isMenuOpen) {
|
|
// Trigger the toggle to close menu
|
|
navToggle.click();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Header scroll behavior
|
|
let isAtTop = true;
|
|
|
|
function handleScroll() {
|
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
const newAtTop = scrollTop <= 200;
|
|
|
|
if (newAtTop !== isAtTop) {
|
|
isAtTop = newAtTop;
|
|
|
|
if (isAtTop) {
|
|
headerNav.classList.remove('header-nav--fixed');
|
|
headerNav.classList.add('header-nav--top');
|
|
} else {
|
|
headerNav.classList.remove('header-nav--top');
|
|
headerNav.classList.add('header-nav--fixed');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Throttle scroll events for better performance
|
|
let scrollThrottle = false;
|
|
window.addEventListener('scroll', function () {
|
|
if (!scrollThrottle) {
|
|
requestAnimationFrame(function () {
|
|
handleScroll();
|
|
scrollThrottle = false;
|
|
});
|
|
scrollThrottle = true;
|
|
}
|
|
});
|
|
|
|
// Handle window resize to ensure proper menu state
|
|
window.addEventListener('resize', function () {
|
|
if (window.innerWidth >= 992 && isMenuOpen) {
|
|
// Reset menu state on desktop
|
|
isMenuOpen = false;
|
|
navMenu.classList.remove('nav__menu-active');
|
|
navMenu.classList.add('nav__menu-hidden');
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
|
|
// Reset hamburger animation
|
|
topLine.classList.remove('svg-line-top');
|
|
middleLine.classList.remove('svg-line-center');
|
|
bottomLine.classList.remove('svg-line-bottom');
|
|
}
|
|
});
|
|
}); |