<template>
  <div>
    <!-- 导航栏 -->
    <UHeader>
      <template #title>物品数据库</template>

      <UNavigationMenu :items="items" />

      <template #right>
        <UColorModeButton />

        <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
          <UButton
            color="neutral"
            variant="ghost"
            to="https://github.com/nuxt/ui"
            target="_blank"
            icon="i-simple-icons-github"
            aria-label="GitHub"
          />
        </UTooltip>
      </template>
    </UHeader>

    <!-- 页面内容插槽 -->
    <slot />
  </div>
</template>

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

const route = useRoute();

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>
