80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
|
// 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();
|
||
|
|
}
|
||
|
|
})();
|