support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-07-02 07:13:41 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: fixes nav system
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-08-28 21:37:16 -04:00
parent ddc015cffb
commit ffad4eda8a
1 changed files with 88 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

122
js/main.js
View file

@ -12,48 +12,102 @@ document.addEventListener("DOMContentLoaded", function () {
initParallax(); initParallax();
}); });
// Navigation functionality // Navigation functionality - Updated to match current implementation
function initNavigation() { function initNavigation() {
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navOverlay = document.getElementById("navOverlay"); const navMenu = document.getElementById("navMenu");
const navClose = document.getElementById("navClose"); const menuGrid = document.getElementById("menuGrid");
const navLinks = document.querySelectorAll(".nav-link"); const navLinks = document.querySelectorAll(".nav-link");
// Open navigation // Only initialize if elements exist
menuToggle.addEventListener("click", function () { if (menuToggle && navMenu && menuGrid) {
navOverlay.classList.add("active"); let isMenuOpen = false;
document.body.style.overflow = "hidden"; let closeBtnEl = null;
});
// Close navigation menuToggle.addEventListener("click", () => {
navClose.addEventListener("click", function () { if (isMenuOpen) {
navOverlay.classList.remove("active"); // Close menu
document.body.style.overflow = ""; navMenu.classList.add("hidden");
}); if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
// Close navigation when clicking outside // Place red X close button at the bottom of the menu panel
navOverlay.addEventListener("click", function (e) { closeBtnEl = document.createElement("button");
if (e.target === navOverlay) { closeBtnEl.setAttribute("aria-label", "Close navigation");
navOverlay.classList.remove("active"); closeBtnEl.className =
document.body.style.overflow = ""; "absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
} closeBtnEl.innerHTML = `
}); <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
// Close navigation when clicking on a link </svg>
navLinks.forEach((link) => { `;
link.addEventListener("click", function () { navMenu.appendChild(closeBtnEl);
navOverlay.classList.remove("active"); closeBtnEl.addEventListener("click", () => {
document.body.style.overflow = ""; navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true;
}
}); });
});
// Close navigation with Escape key // Close menu when clicking outside
document.addEventListener("keydown", function (e) { document.addEventListener("click", (e) => {
if (e.key === "Escape" && navOverlay.classList.contains("active")) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navOverlay.classList.remove("active"); navMenu.classList.add("hidden");
document.body.style.overflow = ""; if (closeBtnEl) {
} closeBtnEl.remove();
}); closeBtnEl = null;
}
isMenuOpen = false;
}
});
// Close navigation when clicking on a link
navLinks.forEach((link) => {
link.addEventListener("click", function () {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
});
// Close navigation with Escape key
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});
}
} }
// Scroll-triggered animations // Scroll-triggered animations