updateweb

website/assets/js/navigation.js

@@ -0,0 +1,79 @@
+// Dynamic Menu Loader for Sky Art Shop
+// Include this in all public pages to load menu from database
+
+(function () {
+  "use strict";
+
+  // Load and render navigation menu from API
+  async function loadNavigationMenu() {
+    try {
+      const response = await fetch("/api/menu");
+      const data = await response.json();
+
+      if (data.success && data.items && data.items.length > 0) {
+        renderDesktopMenu(data.items);
+        renderMobileMenu(data.items);
+      }
+    } catch (error) {
+      console.error("Failed to load menu:", error);
+      // Keep existing hardcoded menu as fallback
+    }
+  }
+
+  function renderDesktopMenu(items) {
+    const desktopMenuList = document.querySelector(".nav-menu-list");
+    if (!desktopMenuList) return;
+
+    desktopMenuList.innerHTML = items
+      .map(
+        (item) => `
+      <li class="nav-item">
+        <a href="${item.url}" class="nav-link">
+          ${item.icon ? `<i class="bi ${item.icon}"></i> ` : ""}${item.label}
+        </a>
+      </li>
+    `
+      )
+      .join("");
+
+    // Set active state based on current page
+    const currentPath = window.location.pathname;
+    document.querySelectorAll(".nav-link").forEach((link) => {
+      if (link.getAttribute("href") === currentPath) {
+        link.classList.add("active");
+      }
+    });
+  }
+
+  function renderMobileMenu(items) {
+    const mobileMenuList = document.querySelector(".mobile-menu-list");
+    if (!mobileMenuList) return;
+
+    mobileMenuList.innerHTML = items
+      .map(
+        (item) => `
+      <li>
+        <a href="${item.url}" class="mobile-link">
+          ${item.icon ? `<i class="bi ${item.icon}"></i> ` : ""}${item.label}
+        </a>
+      </li>
+    `
+      )
+      .join("");
+
+    // Set active state for mobile menu
+    const currentPath = window.location.pathname;
+    document.querySelectorAll(".mobile-link").forEach((link) => {
+      if (link.getAttribute("href") === currentPath) {
+        link.classList.add("active");
+      }
+    });
+  }
+
+  // Load menu when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", loadNavigationMenu);
+  } else {
+    loadNavigationMenu();
+  }
+})();