96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import logo from "../../images/logo.png";
|
|
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const items = [
|
|
{ label: "Kasir", route: "/kasir" },
|
|
{ label: "Laporan", route: "/laporan" },
|
|
{ label: "Akun", route: "/akun" },
|
|
];
|
|
|
|
const subItems = [
|
|
{ label: "Brankas", route: "/brankas" },
|
|
{ label: "Nampan", route: "/nampan" },
|
|
{ label: "Produk", route: "/produk" },
|
|
{ label: "Sales", route: "/sales" },
|
|
];
|
|
|
|
const toggleDropdown = () => {
|
|
isOpen.value = !isOpen.value;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-25 shadow-lg shadow-D rounded-b-md">
|
|
<div class="bg-D h-5 rounded-b-md shadow-lg">
|
|
<div class="h-15"></div>
|
|
<div class="relative">
|
|
<div class="w-full px-50 flex justify-between items-center h-5 relative">
|
|
<div class="absolute left-[50%]">
|
|
<img :src="logo" alt="Logo" class="h-12 w-auto" />
|
|
</div>
|
|
|
|
<!-- 🔹 LEFT MENU -->
|
|
<div class="flex items-center gap-10">
|
|
<!-- Dropdown khusus "Manajemen Produk" -->
|
|
<div class="relative">
|
|
<button
|
|
@click="toggleDropdown"
|
|
class="text-center text-lg text-D hover:underline cursor-pointer"
|
|
>
|
|
Manajemen Produk
|
|
</button>
|
|
|
|
<!-- isi dropdown -->
|
|
<div
|
|
v-if="isOpen"
|
|
class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
|
|
>
|
|
<ul>
|
|
<li
|
|
v-for="(sub, index) in subItems"
|
|
:key="index"
|
|
class="px-4 py-2 hover:bg-A cursor-pointer"
|
|
>
|
|
<router-link :to="sub.route" class="block w-full h-full">
|
|
{{ sub.label }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Kasir -->
|
|
<router-link
|
|
:to="items[0].route"
|
|
class="text-center text-lg text-D hover:underline cursor-pointer"
|
|
>
|
|
{{ items[0].label }}
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- 🔹 RIGHT MENU -->
|
|
<div class="flex items-center gap-8">
|
|
<router-link
|
|
:to="items[1].route"
|
|
class="text-center text-lg text-D hover:underline cursor-pointer"
|
|
>
|
|
{{ items[1].label }}
|
|
</router-link>
|
|
<router-link
|
|
:to="items[2].route"
|
|
class="text-center text-lg text-D hover:underline cursor-pointer"
|
|
>
|
|
{{ items[2].label }}
|
|
</router-link>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|