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

Compare commits

base: support:e562661939d5bfc9fd3fa72afe237b3225a0e3f3
Branches Tags
support:main
...
compare: support:7d35a5a1876b6b0f06f324c72d5663186acdd30f
Branches Tags
support:main

2 commits
e562661939 ... 7d35a5a187

Author SHA1 Message Date
George Birikorang
7d35a5a187 fix: standardize indentation and improve layout consistency in index.html for better readability and structure
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-09-02 07:40:31 -04:00
George Birikorang
9f0d845eef refactor: enhance menu toggle structure and animations across multiple HTML files for improved user experience 2025-09-02 07:40:15 -04:00
8 changed files with 330 additions and 505 deletions
Download patch file Download diff file Expand all files Collapse all files

182
about.html
View file

@ -367,22 +367,30 @@
</div> </div>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Homepage structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"> <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div <div class="cursor-pointer" id="menuToggle">
class="cursor-pointer p-3 transition-transform duration-300" <div class="relative inline-block" id="menuWrap">
id="menuToggle" <div class="menu-waves" aria-hidden="true">
> <span class="wave"></span>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;"> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> </div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="menu-outline" aria-hidden="true"></div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></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>
<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" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1282,6 +1290,23 @@
} }
} }
/* Homepage-style menu outline and waves */
#menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst {
0%, 69% { opacity: 0; transform: scale(1); }
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
100% { opacity: 0; transform: scale(1.95, 1.75); }
}
/* Diagonal mask reveal for hero image */ /* Diagonal mask reveal for hero image */
@keyframes diagMaskReveal { @keyframes diagMaskReveal {
0% { 0% {
@ -1424,112 +1449,31 @@
}); });
}); });
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
// Transform back to full grid if (menuWrap) menuWrap.classList.remove("open");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></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 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
`;
menuToggle.style.transform = "scale(1)";
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Transform to compressed state - only center 5 dots, corner dots disappear if (menuWrap) menuWrap.classList.add("open");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></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 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
`;
menuToggle.style.transform = "scale(0.8)";
menuToggle.style.transition = "transform 0.3s ease";
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"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>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
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)";
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
// Transform back to full grid if (menuWrap) menuWrap.classList.remove("open");
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)";
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });
@ -1630,20 +1574,9 @@
cover.style.opacity = "0"; cover.style.opacity = "0";
} }
const nav = document.getElementById("navMenu"); const nav = document.getElementById("navMenu");
const grid = document.getElementById("menuGrid");
if (nav) nav.classList.add("hidden"); if (nav) nav.classList.add("hidden");
if (grid) { const wrap = document.getElementById("menuWrap");
grid.innerHTML = ` if (wrap) wrap.classList.remove("open");
<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>`;
}
}); });
// Also ensure clean state on bfcache restore / pageshow // Also ensure clean state on bfcache restore / pageshow
@ -1652,21 +1585,10 @@
cover.style.transform = "translateX(100%)"; cover.style.transform = "translateX(100%)";
cover.style.opacity = "0"; cover.style.opacity = "0";
} }
const nav = document.getElementById("navMenu"); const nav2 = document.getElementById("navMenu");
const grid = document.getElementById("menuGrid"); if (nav2) nav2.classList.add("hidden");
if (nav) nav.classList.add("hidden"); const wrap2 = document.getElementById("menuWrap");
if (grid) { if (wrap2) wrap2.classList.remove("open");
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>`;
}
}); });

BIN
assets/icons/petal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

168
contact.html
View file

@ -369,19 +369,30 @@
</a> </a>
</div> </div>
<!-- Menu Toggle --> <!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"> <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">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;"> <div class="relative inline-block" id="menuWrap">
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="menu-waves" aria-hidden="true">
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> </div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="menu-outline" aria-hidden="true"></div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></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>
<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" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -857,90 +868,47 @@
} }
/* Section classes for targeting */ /* Section classes for targeting */
.hero-section { .hero-section { contain: layout; }
/* This class will be added to the hero section for targeting */
}
.contact-form-section { .contact-form-section { contain: layout; }
/* This class will be added to the contact form section for targeting */
}
.map-section { .map-section { contain: layout; }
/* This class will be added to the map section for targeting */ /* Homepage-style menu outline and waves */
} #menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst { 0%,69%{opacity:0;transform:scale(1)} 77%{opacity:.38;transform:scale(1.18,1.12)} 92%{opacity:.22;transform:scale(1.55,1.42)} 100%{opacity:0;transform:scale(1.95,1.75)} }
</style> </style>
<script> <script>
// Menu toggle functionality // Menu toggle functionality (class-toggle)
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuWrap = document.getElementById("menuWrap");
(function setupMenu(){
if (menuToggle && navMenu && menuGrid) { if (!menuToggle || !navMenu || !menuWrap) return;
let isMenuOpen = false; let isOpen = false;
let closeBtnEl = null; menuToggle.addEventListener('click', (e)=>{
e.stopPropagation();
menuToggle.addEventListener("click", () => { isOpen = !isOpen;
if (isMenuOpen) { if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); }
// Close menu else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); }
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open 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)";
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"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>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}); });
isMenuOpen = true; document.addEventListener('click', (e)=>{
} if (!isOpen) return;
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); isOpen = false;
if (closeBtnEl) { navMenu.classList.add('hidden');
closeBtnEl.remove(); menuWrap.classList.remove('open');
closeBtnEl = null;
}
isMenuOpen = false;
} }
}); });
} })();
</script>
// Form submission // Form submission
const contactForm = document.getElementById("contactForm"); const contactForm = document.getElementById("contactForm");
@ -1066,39 +1034,17 @@
// Ensure clean state on back/forward cache restores // Ensure clean state on back/forward cache restores
window.addEventListener('pageshow', () => { window.addEventListener('pageshow', () => {
const nav = document.getElementById('navMenu'); const nav = document.getElementById('navMenu');
const grid = document.getElementById('menuGrid'); const wrap = document.getElementById('menuWrap');
if (nav) nav.classList.add('hidden'); if (nav) nav.classList.add('hidden');
if (grid) { if (wrap) wrap.classList.remove('open');
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>`;
}
}); });
// Cleanup before bfcache snapshot // Cleanup before bfcache snapshot
window.addEventListener('pagehide', () => { window.addEventListener('pagehide', () => {
const nav = document.getElementById('navMenu'); const nav = document.getElementById('navMenu');
const grid = document.getElementById('menuGrid'); const wrap = document.getElementById('menuWrap');
if (nav) nav.classList.add('hidden'); if (nav) nav.classList.add('hidden');
if (grid) { if (wrap) wrap.classList.remove('open');
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>`;
}
}); });
</script> </script>
</body> </body>

68
index.html
View file

@ -405,6 +405,12 @@
<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> </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" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -607,6 +613,13 @@
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
/* Icon swap (homepage only): show petal when wrapper has .open */
#menuWrap.open #menuPetal {
opacity: 1;
}
#menuWrap.open #menuGrid {
opacity: 0;
}
.menu-outline { .menu-outline {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -883,18 +896,8 @@
const navEl = document.getElementById("navMenu"); const navEl = document.getElementById("navMenu");
const gridEl = document.getElementById("menuGrid"); const gridEl = document.getElementById("menuGrid");
if (navEl) navEl.classList.add("hidden"); if (navEl) navEl.classList.add("hidden");
if (gridEl) { const wrapEl = document.getElementById("menuWrap");
gridEl.innerHTML = ` if (wrapEl) wrapEl.classList.remove("open");
<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>`;
}
}); });
// Enhanced slide + zoom hero image transitions // Enhanced slide + zoom hero image transitions
@ -967,6 +970,7 @@
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
@ -975,21 +979,12 @@
if (isMenuOpen) { if (isMenuOpen) {
// Close menu // Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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>
`;
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu (keep button static) // Open menu (keep button static)
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
if (menuWrap) menuWrap.classList.add("open");
isMenuOpen = true; isMenuOpen = true;
} }
}); });
@ -998,17 +993,7 @@
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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>
`;
isMenuOpen = false; isMenuOpen = false;
} }
}); });
@ -1089,20 +1074,9 @@
// Close nav if it was left open and reset grid icon // Close nav if it was left open and reset grid icon
const navMenuEl = document.getElementById("navMenu"); const navMenuEl = document.getElementById("navMenu");
const menuGridEl = document.getElementById("menuGrid"); const wrapEl2 = document.getElementById("menuWrap");
if (navMenuEl) navMenuEl.classList.add("hidden"); if (navMenuEl) navMenuEl.classList.add("hidden");
if (menuGridEl) { if (wrapEl2) wrapEl2.classList.remove("open");
menuGridEl.innerHTML = `
<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>`;
}
}); });
// Menu grid animation sequence // Menu grid animation sequence

175
projects.html
View file

@ -370,28 +370,35 @@
</a> </a>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Homepage/WHY structure -->
<div <div
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40" class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
> >
<div class="cursor-pointer p-3" id="menuToggle"> <div class="cursor-pointer" id="menuToggle">
<div class="relative inline-block" id="menuWrap">
<div class="menu-waves" aria-hidden="true">
<span class="wave"></span>
<span class="wave"></span>
<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>
<div <div
class="grid grid-cols-3 gap-1 w-6 h-6" id="menuPetal"
id="menuGrid" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
style="
outline: 1px solid rgba(255, 255, 255, 0.6);
outline-offset: 6px;
"
> >
<span class="w-1 h-1 bg-white rounded-full"></span> <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
<span class="w-1 h-1 bg-white rounded-full"></span> </div>
<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> </div>
@ -1136,6 +1143,66 @@
.hero-section { .hero-section {
/* This class will be added to the hero section for targeting */ /* This class will be added to the hero section for targeting */
} }
/* Homepage-style menu outline and waves */
#menuWrap {
position: relative;
overflow: visible;
}
.menu-outline {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
outline: 1px solid rgba(255, 255, 255, 0.6);
outline-offset: 6px;
}
.menu-waves {
position: absolute;
inset: -20px;
z-index: 1;
pointer-events: none;
}
.menu-waves .wave {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.28);
opacity: 0;
transform: scale(1);
animation: waveBurst 5.8s ease-in-out infinite;
}
.menu-waves .wave:nth-child(2) {
animation-delay: 0.3s;
}
.menu-waves .wave:nth-child(3) {
animation-delay: 0.6s;
}
#menuWrap.open #menuPetal {
opacity: 1;
}
#menuWrap.open #menuGrid {
opacity: 0;
}
@keyframes waveBurst {
0%,
69% {
opacity: 0;
transform: scale(1);
}
77% {
opacity: 0.38;
transform: scale(1.18, 1.12);
}
92% {
opacity: 0.22;
transform: scale(1.55, 1.42);
}
100% {
opacity: 0;
transform: scale(1.95, 1.75);
}
}
</style> </style>
<script src="js/main.js"></script> <script src="js/main.js"></script>
@ -1474,93 +1541,31 @@
} }
}); });
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X if (menuWrap) menuWrap.classList.add("open");
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>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"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>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
menuGrid.innerHTML = ` if (menuWrap) menuWrap.classList.remove("open");
<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>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });

107
services.html
View file

@ -166,6 +166,23 @@
.hero-section { .hero-section {
/* This class will be added to the hero section for targeting */ /* This class will be added to the hero section for targeting */
} }
/* Homepage-style menu outline and waves */
#menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst {
0%, 69% { opacity: 0; transform: scale(1); }
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
100% { opacity: 0; transform: scale(1.95, 1.75); }
}
</style> </style>
</head> </head>
<body class="bg-kh3-black text-white font-montserrat"> <body class="bg-kh3-black text-white font-montserrat">
@ -518,22 +535,30 @@
</a> </a>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"> <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div <div class="cursor-pointer" id="menuToggle">
class="cursor-pointer p-3" <div class="relative inline-block" id="menuWrap">
id="menuToggle" <div class="menu-waves" aria-hidden="true">
> <span class="wave"></span>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;"> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> </div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="menu-outline" aria-hidden="true"></div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></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>
<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" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1084,71 +1109,31 @@
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el)); document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})(); })();
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X if (menuWrap) menuWrap.classList.add("open");
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>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"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>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });

8
styles/output.css
View file

@ -1022,6 +1022,10 @@ video {
height: 100svh; height: 100svh;
} }
.h-7 {
height: 1.75rem;
}
.max-h-\[90vh\] { .max-h-\[90vh\] {
max-height: 90vh; max-height: 90vh;
} }
@ -1138,6 +1142,10 @@ video {
width: 1rem; width: 1rem;
} }
.w-7 {
width: 1.75rem;
}
.min-w-0 { .min-w-0 {
min-width: 0px; min-width: 0px;
} }

107
who.html
View file

@ -367,22 +367,30 @@
</div> </div>
</div> </div>
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Homepage/WHY structure -->
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-40"> <div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
<div <div class="cursor-pointer" id="menuToggle">
class="cursor-pointer p-3" <div class="relative inline-block" id="menuWrap">
id="menuToggle" <div class="menu-waves" aria-hidden="true">
> <span class="wave"></span>
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid" style="outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px;"> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="wave"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> </div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="menu-outline" aria-hidden="true"></div>
<span class="w-1 h-1 bg-white rounded-full"></span> <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white rounded-full"></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>
<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" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1469,6 +1477,23 @@
.team-section { .team-section {
/* This class will be added to the team section for targeting */ /* This class will be added to the team section for targeting */
} }
/* Homepage-style menu outline and waves */
#menuWrap { position: relative; overflow: visible; }
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
.menu-waves .wave:nth-child(3) { animation-delay: 0.6s; }
#menuWrap.open #menuPetal { opacity: 1; }
#menuWrap.open #menuGrid { opacity: 0; }
@keyframes waveBurst {
0%, 69% { opacity: 0; transform: scale(1); }
77% { opacity: 0.38; transform: scale(1.18, 1.12); }
92% { opacity: 0.22; transform: scale(1.55, 1.42); }
100% { opacity: 0; transform: scale(1.95, 1.75); }
}
</style> </style>
<script src="js/main.js"></script> <script src="js/main.js"></script>
@ -1521,71 +1546,31 @@
}); });
}); });
// Menu toggle functionality // Menu toggle functionality (homepage pattern)
const menuToggle = document.getElementById("menuToggle"); const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu"); const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid"); const menuGrid = document.getElementById("menuGrid");
const menuWrap = document.getElementById("menuWrap");
if (menuToggle && navMenu && menuGrid) { if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false; let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => { menuToggle.addEventListener("click", () => {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X if (menuWrap) menuWrap.classList.add("open");
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>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"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>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true; isMenuOpen = true;
} }
}); });
// Close menu when clicking outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
if (closeBtnEl) { if (menuWrap) menuWrap.classList.remove("open");
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false; isMenuOpen = false;
} }
}); });