servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

fix filters and nav into alpine again

Browse source
This commit is contained in:
Tobias Brunner 2025-07-17 08:33:06 +02:00
parent 1d39e3445e
commit 5ab10f2264
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
2 changed files with 64 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

96
hub/services/static/js/nav.js
View file

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