webupdate

website/public/assets/js/modern-theme.js

@@ -41,19 +41,67 @@ const SkyArtShop = {
       });
     }
 
-    // Mobile menu toggle
+    // Mobile/Tablet menu toggle
     if (mobileToggle && navMenu) {
+      // Create overlay element for background dimming
+      let overlay = document.querySelector(".nav-menu-overlay");
+      if (!overlay) {
+        overlay = document.createElement("div");
+        overlay.className = "nav-menu-overlay";
+        document.body.appendChild(overlay);
+      }
+
+      // Create close button inside menu
+      let closeBtn = navMenu.querySelector(".nav-menu-close");
+      if (!closeBtn) {
+        closeBtn = document.createElement("button");
+        closeBtn.className = "nav-menu-close";
+        closeBtn.innerHTML = '<i class="bi bi-x-lg"></i>';
+        closeBtn.setAttribute("aria-label", "Close menu");
+        navMenu.insertBefore(closeBtn, navMenu.firstChild);
+      }
+
+      // Function to open menu
+      const openMenu = () => {
+        navMenu.classList.add("open");
+        mobileToggle.classList.add("active");
+        overlay.classList.add("active");
+        document.body.classList.add("nav-menu-open");
+      };
+
+      // Function to close menu
+      const closeMenu = () => {
+        navMenu.classList.remove("open");
+        mobileToggle.classList.remove("active");
+        overlay.classList.remove("active");
+        document.body.classList.remove("nav-menu-open");
+      };
+
+      // Toggle button click
       mobileToggle.addEventListener("click", (e) => {
         e.stopPropagation();
-        navMenu.classList.toggle("open");
-        mobileToggle.classList.toggle("active");
+        if (navMenu.classList.contains("open")) {
+          closeMenu();
+        } else {
+          openMenu();
+        }
+      });
+
+      // Close button click
+      closeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        closeMenu();
+      });
+
+      // Overlay click to close
+      overlay.addEventListener("click", () => {
+        closeMenu();
       });
 
       // Close menu when clicking a link
       navMenu.querySelectorAll(".nav-link").forEach((link) => {
         link.addEventListener("click", () => {
-          navMenu.classList.remove("open");
-          mobileToggle.classList.remove("active");
+          closeMenu();
         });
       });
 
@@ -64,12 +112,11 @@ const SkyArtShop = {
           !navMenu.contains(e.target) &&
           !mobileToggle.contains(e.target)
         ) {
-          navMenu.classList.remove("open");
-          mobileToggle.classList.remove("active");
+          closeMenu();
         }
       });
 
-      // Close menu when touching outside (for mobile)
+      // Close menu when touching outside (for mobile/tablet)
       document.addEventListener(
         "touchstart",
         (e) => {
@@ -78,12 +125,18 @@ const SkyArtShop = {
             !navMenu.contains(e.target) &&
             !mobileToggle.contains(e.target)
           ) {
-            navMenu.classList.remove("open");
-            mobileToggle.classList.remove("active");
+            closeMenu();
           }
         },
         { passive: true },
       );
+
+      // Close menu on escape key
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && navMenu.classList.contains("open")) {
+          closeMenu();
+        }
+      });
     }
 
     // Set active nav link