52 lines
2.3 KiB
JavaScript
52 lines
2.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const nav = document.getElementById('mainNav'); // Keep for mobile toggle
|
|
const header = document.querySelector('header'); // Get the header element
|
|
const toggle = document.getElementById('navToggle');
|
|
|
|
// Toggle menu on mobile
|
|
toggle.addEventListener('click', function () {
|
|
nav.classList.toggle('open'); // Mobile menu still controlled by nav
|
|
toggle.classList.toggle('active');
|
|
});
|
|
|
|
// Handle transparent header scroll effect for home page on desktop
|
|
const body = document.body;
|
|
const scrollThreshold = 50; // Pixels to scroll before changing background
|
|
|
|
function handleScroll() {
|
|
// Check if it's the home page layout and desktop view
|
|
if (header && body.classList.contains('backendlayout-home_page') && window.innerWidth >= 1024) { // 1024px is Tailwind's default lg breakpoint
|
|
if (window.scrollY > scrollThreshold) {
|
|
header.classList.add('scrolled'); // Add class to header
|
|
} else {
|
|
header.classList.remove('scrolled'); // Remove class from header
|
|
}
|
|
} else if (header) { // Check if header exists before trying to remove class
|
|
// Ensure scrolled class is removed if not on home page desktop or resized below lg
|
|
header.classList.remove('scrolled'); // Remove class from header
|
|
}
|
|
}
|
|
|
|
// Initial check in case the page loads already scrolled
|
|
handleScroll();
|
|
|
|
// Add scroll and resize listeners
|
|
window.addEventListener('scroll', handleScroll);
|
|
window.addEventListener('resize', handleScroll); // Re-check on resize
|
|
|
|
const submenuParents = document.querySelectorAll('.nav-item.has-submenu');
|
|
submenuParents.forEach(parent => {
|
|
parent.addEventListener('click', (e) => {
|
|
if (window.innerWidth <= 992) {
|
|
e.preventDefault();
|
|
const subMenu = parent.querySelector('.sub-menu');
|
|
if (subMenu) {
|
|
const isOpen = subMenu.style.display === 'block';
|
|
document.querySelectorAll('.sub-menu').forEach(sm => sm.style.display = 'none');
|
|
subMenu.style.display = isOpen ? 'none' : 'block';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|