support/kh3_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/kh3_website.git synced 2026-10-16 23:31:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: update menu toggle structure and icons across multiple HTML files for improved consistency and user experience

Browse source
This commit is contained in:
George Birikorang 2025-09-03 04:02:08 -04:00
parent 03b6cc138b
commit 584ba42eab
10 changed files with 210 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

126
js/main.js
View file

@ -21,42 +21,49 @@ function initNavigation() {
// Only initialize if elements exist
if (menuToggle && navMenu && menuGrid) {
console.log("Navigation elements found:", {
menuToggle,
navMenu,
menuGrid,
});
let isMenuOpen = false;
const menuPetal = document.getElementById("menuPetal");
console.log("menuPetal element:", menuPetal);
const menuWrap = document.getElementById("menuWrap");
// Force a known initial state: closed menu shows closed petal
if (menuWrap) menuWrap.classList.remove("open");
try {
if (menuGrid) menuGrid.style.opacity = "1";
if (menuPetal) menuPetal.style.opacity = "0";
} catch (e) {}
menuToggle.addEventListener("click", () => {
console.log("Menu clicked! Current state:", isMenuOpen);
console.log("menuPetal element:", menuPetal);
console.log("navMenu element:", navMenu);
if (isMenuOpen) {
// Close menu
console.log("Closing menu...");
navMenu.classList.add("hidden");
// Transform back to full grid
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>
`;
menuGrid.style.transform = "scale(1)";
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
console.log("Showing closed petal, hiding open petal");
}
isMenuOpen = false;
} else {
// Open menu
console.log("Opening menu...");
navMenu.classList.remove("hidden");
// Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></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 opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
`;
menuGrid.style.transform = "scale(0.8)";
// Hide closed petal, show open petal
if (menuPetal) {
menuGrid.style.opacity = "0";
menuPetal.style.opacity = "1";
console.log("Hiding closed petal, showing open petal");
}
isMenuOpen = true;
}
});
@ -65,58 +72,37 @@ function initNavigation() {
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
// Transform back to grid
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>
`;
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
}
isMenuOpen = false;
}
});
}
});
// Close navigation when clicking on a link
navLinks.forEach((link) => {
link.addEventListener("click", function () {
// Close navigation when clicking on a link
navLinks.forEach((link) => {
link.addEventListener("click", function () {
navMenu.classList.add("hidden");
// Transform back to grid
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>
`;
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
}
isMenuOpen = false;
});
});
});
// Close navigation with Escape key
document.addEventListener("keydown", function (e) {
// Close navigation with Escape key
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
navMenu.classList.add("hidden");
// Transform back to grid
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>
`;
// Show closed petal, hide open petal
if (menuPetal) {
menuGrid.style.opacity = "1";
menuPetal.style.opacity = "0";
}
isMenuOpen = false;
}
});