73 lines
1.6 KiB
Vue
73 lines
1.6 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";
|
|
|
|
// Shared state
|
|
const isOpen = ref(false);
|
|
const isMobileMenuOpen = ref(false);
|
|
|
|
// Menu items configuration
|
|
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" },
|
|
];
|
|
|
|
// Shared methods
|
|
const toggleDropdown = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
|
|
const toggleMobileMenu = () => {
|
|
isMobileMenuOpen.value = !isMobileMenuOpen.value;
|
|
isOpen.value = false;
|
|
};
|
|
|
|
const closeMobileMenu = () => {
|
|
isMobileMenuOpen.value = false;
|
|
isOpen.value = false;
|
|
};
|
|
|
|
const logout = () => {
|
|
console.log("Logout clicked");
|
|
closeMobileMenu();
|
|
};
|
|
|
|
// Provide shared data to child components
|
|
provide('navigationData', {
|
|
logo,
|
|
items,
|
|
isOpen,
|
|
isMobileMenuOpen,
|
|
toggleDropdown,
|
|
toggleMobileMenu,
|
|
closeMobileMenu,
|
|
logout
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative">
|
|
<!-- Desktop Navigation -->
|
|
<NavDesktop />
|
|
|
|
<!-- Mobile Navigation -->
|
|
<NavMobile />
|
|
|
|
<!-- Click Outside Handler for Desktop Dropdown -->
|
|
<div
|
|
v-if="isOpen && !isMobileMenuOpen"
|
|
@click="isOpen = false"
|
|
class="fixed inset-0 z-10"
|
|
></div>
|
|
</div>
|
|
</template> |