georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: perfects mobile menu and nav

Browse source
This commit is contained in:
George Birikorang 2025-09-03 01:39:25 -04:00
parent a3c642d9fe
commit 9275ae82db
7 changed files with 336 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

36
projects.html
View file

@ -368,7 +368,8 @@
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="relative inline-block" id="menuWrap">
<!-- Desktop view: menuWrap with waves and outline -->
<div class="relative inline-block hidden md:block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
@ -393,6 +394,25 @@
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
</div>
</div>
<!-- Mobile view: simple transparent background -->
<div class="md:hidden">
<div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
<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>
</div>
</div>
</div>
</div>
</div>
@ -1137,7 +1157,7 @@
contain: layout;
}
/* Homepage-style menu outline and waves */
/* Homepage-style menu outline and waves (desktop only) */
#menuWrap {
position: relative;
overflow: visible;
@ -1150,6 +1170,7 @@
outline: 1px solid rgba(255, 255, 255, 0.6);
outline-offset: 6px;
}
.menu-waves {
position: absolute;
inset: -20px;
@ -1534,27 +1555,32 @@
}
});
// Menu toggle functionality (homepage pattern)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
const menuGrid = document.getElementById("menuGrid");
const menuGridMobile = document.getElementById("menuGridMobile");
if (menuToggle && navMenu && menuGrid) {
if (menuToggle && navMenu) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (menuWrap) menuWrap.classList.remove("open");
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");