49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<template>
|
|
<div class="relative inline-block text-left">
|
|
<!-- Tombol Dropdown -->
|
|
<button
|
|
@click="isOpen = !isOpen"
|
|
class="px-4 py-2 bg-white border rounded-md shadow-sm hover:bg-gray-100"
|
|
>
|
|
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="(item, index) in items"
|
|
:key="index"
|
|
@click="goTo(item.route)"
|
|
class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
|
|
>
|
|
{{ item.label }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
|
|
const isOpen = ref(false);
|
|
const router = useRouter();
|
|
|
|
const items = [
|
|
{ label: "Brankas", route: "/brankas" },
|
|
{ label: "Nampan", route: "/nampan" },
|
|
{ label: "Produk", route: "/produk" },
|
|
{ label: "Sales", route: "/sales" },
|
|
];
|
|
|
|
const goTo = (route) => {
|
|
isOpen.value = false;
|
|
router.push(route);
|
|
};
|
|
</script>
|