fix: fixes nav system

js/main.js

@@ -12,48 +12,102 @@ document.addEventListener("DOMContentLoaded", function () {
   initParallax();
 });
 
-// Navigation functionality
+// Navigation functionality - Updated to match current implementation
 function initNavigation() {
   const menuToggle = document.getElementById("menuToggle");
-  const navOverlay = document.getElementById("navOverlay");
-  const navClose = document.getElementById("navClose");
+  const navMenu = document.getElementById("navMenu");
+  const menuGrid = document.getElementById("menuGrid");
   const navLinks = document.querySelectorAll(".nav-link");
 
-  // Open navigation
-  menuToggle.addEventListener("click", function () {
-    navOverlay.classList.add("active");
-    document.body.style.overflow = "hidden";
-  });
+  // Only initialize if elements exist
+  if (menuToggle && navMenu && menuGrid) {
+    let isMenuOpen = false;
+    let closeBtnEl = null;
 
-  // Close navigation
-  navClose.addEventListener("click", function () {
-    navOverlay.classList.remove("active");
-    document.body.style.overflow = "";
-  });
+    menuToggle.addEventListener("click", () => {
+      if (isMenuOpen) {
+        // Close menu
+        navMenu.classList.add("hidden");
+        if (closeBtnEl) {
+          closeBtnEl.remove();
+          closeBtnEl = null;
+        }
+        isMenuOpen = false;
+      } else {
+        // Open menu
+        navMenu.classList.remove("hidden");
+        // Keep the grid icon as is, don't transform to X
+        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>
+        `;
 
-  // Close navigation when clicking outside
-  navOverlay.addEventListener("click", function (e) {
-    if (e.target === navOverlay) {
-      navOverlay.classList.remove("active");
-      document.body.style.overflow = "";
-    }
-  });
-
-  // Close navigation when clicking on a link
-  navLinks.forEach((link) => {
-    link.addEventListener("click", function () {
-      navOverlay.classList.remove("active");
-      document.body.style.overflow = "";
+        // 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;
+      }
     });
-  });
 
-  // Close navigation with Escape key
-  document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape" && navOverlay.classList.contains("active")) {
-      navOverlay.classList.remove("active");
-      document.body.style.overflow = "";
-    }
-  });
+    // Close menu when clicking outside
+    document.addEventListener("click", (e) => {
+      if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
+        navMenu.classList.add("hidden");
+        if (closeBtnEl) {
+          closeBtnEl.remove();
+          closeBtnEl = null;
+        }
+        isMenuOpen = false;
+      }
+    });
+
+    // Close navigation when clicking on a link
+    navLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        navMenu.classList.add("hidden");
+        if (closeBtnEl) {
+          closeBtnEl.remove();
+          closeBtnEl = null;
+        }
+        isMenuOpen = false;
+      });
+    });
+
+    // Close navigation with Escape key
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
+        navMenu.classList.add("hidden");
+        if (closeBtnEl) {
+          closeBtnEl.remove();
+          closeBtnEl = null;
+        }
+        isMenuOpen = false;
+      }
+    });
+  }
 }
 
 // Scroll-triggered animations