georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests 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

63
who.html
View file

@ -353,14 +353,11 @@
<!-- Static Logo and Menu -->
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<img
src="assets/images/kh3_logo.png"
alt="KH3"
class="w-12 h-12"
/>
</div>
<div class="flex items-center gap-3">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
</a>
</div>
</div>
<!-- Menu Toggle with Homepage/WHY structure -->
@ -368,7 +365,7 @@
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
>
<div class="cursor-pointer" id="menuToggle">
<!-- Desktop view: menuWrap with waves and outline -->
<!-- Desktop view: menuWrap with waves and outline (wrapped like WHY page) -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
@ -376,22 +373,14 @@
<span class="wave"></span>
</div>
<div class="menu-outline" aria-hidden="true"></div>
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<div class="relative z-20" id="menuGrid" style="opacity: 1;">
<img src="assets/icons/closed_petal.png" alt="closed petal" class="block w-6 h-6" />
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity z-0"
>
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
@ -1716,16 +1705,12 @@
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden");
if (grid) {
grid.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>`;
// Ensure closed state on snapshot
grid.style.opacity = "1";
const wrap = document.getElementById("menuWrap");
if (wrap) wrap.classList.remove("open");
const petal = document.getElementById("menuPetal");
if (petal) petal.style.opacity = "0";
}
});
@ -1739,16 +1724,12 @@
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden");
if (grid) {
grid.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>`;
// Ensure closed state on restore
grid.style.opacity = "1";
const wrap = document.getElementById("menuWrap");
if (wrap) wrap.classList.remove("open");
const petal = document.getElementById("menuPetal");
if (petal) petal.style.opacity = "0";
}
});