79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<script setup>
|
|
import { ref, provide } from "vue";
|
|
import NavDesktop from "./NavDesktop.vue";
|
|
import NavMobile from "./NavMobile.vue";
|
|
import logo from "../../images/logo.png";
|
|
|
|
const isOpen = ref(false);
|
|
const isMobileMenuOpen = ref(false);
|
|
const openDropdownIndex = ref(null);
|
|
|
|
const items = [
|
|
{ label: "Manajemen Produk", subItems: [
|
|
{ label: "Brankas", route: "/brankas" },
|
|
{ label: "Nampan", route: "/nampan" },
|
|
{ label: "Produk", route: "/produk" },
|
|
{ label: "Kategori", route: "/kategori" },
|
|
{ label: "Sales", route: "/sales" },
|
|
] },
|
|
{ label: "Kasir", route: "/kasir" },
|
|
{ label: "Laporan", route: "/laporan" },
|
|
{ label: "Akun", route: "/akun" },
|
|
];
|
|
|
|
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 = () => {
|
|
console.log("Logout clicked");
|
|
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>
|