123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<script setup>
|
|
import { ref, provide, computed } from "vue";
|
|
import NavDesktop from "./NavDesktop.vue";
|
|
import NavMobile from "./NavMobile.vue";
|
|
import logo from "../../images/logo.png";
|
|
import axios from "axios";
|
|
|
|
const isOpen = ref(false);
|
|
const isMobileMenuOpen = ref(false);
|
|
const openDropdownIndex = ref(null);
|
|
|
|
const baseItems = [
|
|
{
|
|
label: "Manajemen Produk",
|
|
subItems: [
|
|
{ label: "Produk", route: "/produk" },
|
|
{ label: "Nampan", route: "/nampan" },
|
|
{ label: "Brankas", route: "/brankas" },
|
|
{ label: "Kategori", route: "/kategori" },
|
|
{ label: "Sales", route: "/sales" },
|
|
]
|
|
},
|
|
{ label: "Kasir", route: "/kasir" },
|
|
{ label: "Laporan", route: "/laporan" },
|
|
{ label: "Akun", route: "/akun" },
|
|
];
|
|
|
|
const role = localStorage.getItem("role");
|
|
|
|
const items = computed(() => {
|
|
let filteredItems = [...baseItems];
|
|
|
|
if (role === "kasir") {
|
|
// Hilangkan menu Akun & Laporan
|
|
filteredItems = filteredItems.filter(item => !["Akun", "Laporan"].includes(item.label));
|
|
|
|
// Hilangkan sub-menu Sales di Manajemen Produk
|
|
filteredItems = filteredItems.map(item => {
|
|
if (item.label === "Manajemen Produk") {
|
|
return {
|
|
...item,
|
|
subItems: item.subItems?.filter(sub => sub.label !== "Sales") || []
|
|
};
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
|
|
return filteredItems;
|
|
});
|
|
|
|
|
|
const toggleDropdown = (index = null) => {
|
|
if (index !== null) {
|
|
openDropdownIndex.value = openDropdownIndex.value === index ? null : index;
|
|
} else {
|
|
isOpen.value = !isOpen.value;
|
|
}
|
|
};
|
|
|
|
const toggleMobileMenu = () => {
|
|
isMobileMenuOpen.value = !isMobileMenuOpen.value;
|
|
isOpen.value = false;
|
|
openDropdownIndex.value = null;
|
|
};
|
|
|
|
const closeMobileMenu = () => {
|
|
isMobileMenuOpen.value = false;
|
|
isOpen.value = false;
|
|
openDropdownIndex.value = null;
|
|
};
|
|
|
|
const logout = async () => {
|
|
try {
|
|
await axios.post("/api/logout", null, {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
|
},
|
|
});
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("role");
|
|
|
|
window.location.href = "/";
|
|
} catch (error) {
|
|
if (error.response && error.response.status === 401) {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("role");
|
|
window.location.href = "/";
|
|
} else {
|
|
console.error("Logout failed:", error);
|
|
}
|
|
}
|
|
closeMobileMenu();
|
|
};
|
|
|
|
// Provide shared data to child components
|
|
provide("navigationData", {
|
|
logo,
|
|
items,
|
|
isOpen,
|
|
isMobileMenuOpen,
|
|
openDropdownIndex,
|
|
toggleDropdown,
|
|
toggleMobileMenu,
|
|
closeMobileMenu,
|
|
logout
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<!-- Desktop Navigation -->
|
|
<NavDesktop />
|
|
|
|
<!-- Mobile Navigation -->
|
|
<NavMobile />
|
|
|
|
<!-- Click Outside Handler for Desktop Dropdown -->
|
|
<div v-if="openDropdownIndex !== null && !isMobileMenuOpen" @click="openDropdownIndex = null"
|
|
class="fixed inset-0 z-10"></div>
|
|
</div>
|
|
</template>
|