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

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

View file

@ -367,7 +367,7 @@
<div
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">
<div class="cursor-pointer" id="menuToggle">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3">
@ -377,22 +377,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" id="menuGrid">
<img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
</div>
<div
id="menuPetal"
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
>
<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>
</div>