<template>
  <div>
    <UDashboardGroup>
      <UDashboardSidebar id="default" :open="sidebarOpen" collapsible resizable>
        <template #header="{ collapsed }">
          <div class="font-bold flex items-center">
            <span class="ml-2" v-if="!collapsed">物品数据库</span>
          </div>
        </template>

        <template #default="{ collapsed }">
          <UDashboardSearchButton
            :collapsed="collapsed"
            icon="mdi:magnify"
            class="bg-transparent ring-default"
          />

          <UNavigationMenu
            :collapsed="collapsed"
            :items="items"
            orientation="vertical"
            tooltip
            popover
          />
        </template>

        <template #footer="{ collapsed }">
          <UColorModeButton />
        </template>
      </UDashboardSidebar>

      <UDashboardSearch :groups="groups" />

      <slot />
    </UDashboardGroup>
  </div>
</template>

<script setup lang="ts">
import type { NavigationMenuItem } from "@nuxt/ui";

const route = useRoute();

const sidebarOpen = ref(false);
const groups = ref([]);

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: "物品管理",
    to: "/",
    icon: "marketeq:box",
  },
  {
    label: "导出配置",
    to: "/export",
    active: route.path.startsWith("/export"),
    icon: "marketeq:export-2",
  },
  {
    label: "历史记录",
    to: "/history",
    active: route.path.startsWith("/history"),
    icon: "marketeq:chart-line-alt-1",
  },
]);
</script>
