106 lines
3 KiB
JavaScript
106 lines
3 KiB
JavaScript
// Navigation JavaScript
|
|
let lastScrollY = window.scrollY;
|
|
let ticking = false;
|
|
|
|
function updateNavigation() {
|
|
const navigation = document.getElementById("navigation");
|
|
const scrolled = window.scrollY > 50;
|
|
|
|
if (scrolled) {
|
|
navigation.classList.add("scrolled");
|
|
|
|
// Hide/show nav on scroll
|
|
if (window.scrollY > lastScrollY && window.scrollY > 100) {
|
|
navigation.classList.add("hidden");
|
|
} else {
|
|
navigation.classList.remove("hidden");
|
|
}
|
|
} else {
|
|
navigation.classList.remove("scrolled", "hidden");
|
|
}
|
|
|
|
lastScrollY = window.scrollY;
|
|
ticking = false;
|
|
}
|
|
|
|
function requestTick() {
|
|
if (!ticking) {
|
|
requestAnimationFrame(updateNavigation);
|
|
ticking = true;
|
|
}
|
|
}
|
|
|
|
// Mobile navigation functionality
|
|
function setupMobileNavigation() {
|
|
const burgerMenu = document.getElementById("burger-menu");
|
|
const mainNav = document.getElementById("main-nav");
|
|
const body = document.body;
|
|
|
|
// Create overlay for mobile menu
|
|
const overlay = document.createElement("div");
|
|
overlay.className = "nav-overlay";
|
|
document.body.appendChild(overlay);
|
|
|
|
if (burgerMenu && mainNav) {
|
|
burgerMenu.addEventListener("click", function () {
|
|
const isActive = mainNav.classList.contains("active");
|
|
|
|
if (isActive) {
|
|
// Close menu
|
|
mainNav.classList.remove("active");
|
|
burgerMenu.classList.remove("active");
|
|
overlay.classList.remove("active");
|
|
body.classList.remove("nav-open");
|
|
} else {
|
|
// Open menu
|
|
mainNav.classList.add("active");
|
|
burgerMenu.classList.add("active");
|
|
overlay.classList.add("active");
|
|
body.classList.add("nav-open");
|
|
}
|
|
});
|
|
|
|
// Close menu when clicking on overlay
|
|
overlay.addEventListener("click", function () {
|
|
mainNav.classList.remove("active");
|
|
burgerMenu.classList.remove("active");
|
|
overlay.classList.remove("active");
|
|
body.classList.remove("nav-open");
|
|
});
|
|
|
|
// Close menu when clicking on a link
|
|
const navLinks = mainNav.querySelectorAll("a");
|
|
navLinks.forEach((link) => {
|
|
link.addEventListener("click", function () {
|
|
mainNav.classList.remove("active");
|
|
burgerMenu.classList.remove("active");
|
|
overlay.classList.remove("active");
|
|
body.classList.remove("nav-open");
|
|
|
|
// Update active state
|
|
navLinks.forEach((l) => l.classList.remove("active"));
|
|
this.classList.add("active");
|
|
});
|
|
});
|
|
|
|
// Set initial active state based on current hash
|
|
function setActiveNavLink() {
|
|
const currentHash = window.location.hash || "#home";
|
|
navLinks.forEach((link) => {
|
|
if (link.getAttribute("href") === currentHash) {
|
|
link.classList.add("active");
|
|
} else {
|
|
link.classList.remove("active");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update active state on hash change
|
|
window.addEventListener("hashchange", setActiveNavLink);
|
|
setActiveNavLink();
|
|
}
|
|
}
|
|
|
|
// Initialize navigation
|
|
window.addEventListener("scroll", requestTick);
|
|
window.addEventListener("load", updateNavigation);
|