<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>
