NavItem (导航项)

<script setup lang="ts">
import { ref } from 'vue'

const items = [
  { key: 'home', label: '首页', icon: 'lucide:home' },
  { key: 'community', label: '社区', icon: 'lucide:messages-square' },
  { key: 'calendar', label: '发售月历', icon: 'lucide:calendar' },
  { key: 'settings', label: '设置', icon: 'lucide:settings' },
]
const current = ref('home')
</script>

<template>
  <nav class="flex w-24 flex-col gap-1">
    <KunNavItem
      v-for="item in items"
      :key="item.key"
      :label="item.label"
      :icon="item.icon"
      :current="current === item.key"
      stacked
      @click="current = item.key"
    />
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const items = [
  { key: 'home', label: '首页', icon: 'lucide:home' },
  { key: 'community', label: '社区', icon: 'lucide:messages-square' },
  { key: 'calendar', label: '发售月历', icon: 'lucide:calendar' },
  { key: 'settings', label: '设置', icon: 'lucide:settings' },
]
const current = ref('community')
</script>

<template>
  <nav class="flex w-56 flex-col gap-1">
    <KunNavItem
      v-for="item in items"
      :key="item.key"
      :label="item.label"
      :icon="item.icon"
      :current="current === item.key"
      @click="current = item.key"
    />
    <KunNavItem label="题库" icon="lucide:book-open" disabled />
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref('home')
const unread = ref(3)

const open = (key: string) => {
  current.value = key
  if (key === 'messages') unread.value = 0
}
</script>

<template>
  <nav
    class="bg-content1 border-kun grid w-full max-w-sm grid-cols-4 gap-1 rounded-lg border p-1"
  >
    <KunNavItem
      label="首页"
      icon="lucide:home"
      :current="current === 'home'"
      stacked
      @click="open('home')"
    />
    <KunNavItem
      label="社区"
      icon="lucide:messages-square"
      :current="current === 'community'"
      stacked
      @click="open('community')"
    />
    <KunNavItem
      label="消息"
      :current="current === 'messages'"
      stacked
      @click="open('messages')"
    >
      <template #icon>
        <KunBadge :count="unread" size="sm">
          <KunIcon name="lucide:send" class-name="size-5" />
        </KunBadge>
      </template>
    </KunNavItem>
    <KunNavItem
      label="设置"
      icon="lucide:settings"
      :current="current === 'settings'"
      stacked
      @click="open('settings')"
    />
  </nav>
</template>