Sidebar 侧边栏

<script setup lang="ts">
  import { AppShell, NavLink, Sidebar, Text } from '@hina-ui/vue'
</script>

<template>
  <AppShell class="border-line h-64 w-full rounded-lg border">
    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="概览">概览</NavLink>
        <NavLink href="#" label="我的书架">我的书架</NavLink>
        <NavLink href="#" label="收藏">收藏</NavLink>
      </Sidebar>
    </template>

    <Text size="sm" tone="muted" class="block p-6">侧栏条目放在默认插槽里。</Text>
  </AppShell>
</template>

<script setup lang="ts">
  import { AppShell, NavLink, Sidebar, SidebarGroup, Text } from '@hina-ui/vue'
</script>

<template>
  <AppShell class="border-line h-96 w-full rounded-lg border">
    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="概览">概览</NavLink>
        <SidebarGroup label="作品库">
          <NavLink href="#" label="Galgame">Galgame</NavLink>
          <NavLink href="#" label="轻小说">轻小说</NavLink>
        </SidebarGroup>
        <SidebarGroup label="创作" :default-open="false">
          <NavLink href="#" label="我的条目">我的条目</NavLink>
          <NavLink href="#" label="草稿箱">草稿箱</NavLink>
        </SidebarGroup>
      </Sidebar>
    </template>

    <Text size="sm" tone="muted" class="block p-6">「创作」一组默认收起。</Text>
  </AppShell>
</template>

<script setup lang="ts">
  import { House } from '@lucide/vue'
  import { AppShell, Image, NavLink, Sidebar, SidebarTrigger, Stack, Text } from '@hina-ui/vue'
  import Wordmark from '../../../components/docs/Wordmark.vue'

  const examples = [
    { mode: 'both', label: '图标与字标' },
    { mode: 'wordmark', label: '只有字标' },
    { mode: 'icon', label: '只有图标' },
  ]
</script>

<template>
  <Stack gap="lg" class="w-full">
    <Stack v-for="example in examples" :key="example.mode" gap="sm">
      <Text size="sm" tone="muted">{{ example.label }}</Text>
      <AppShell mobile-title="Hina UI" class="border-line h-52 w-full rounded-lg border">
        <template #sidebar>
          <Sidebar>
            <template v-if="example.mode !== 'wordmark'" #icon>
              <Image src="/favicon.png" alt="Hina UI" class="rounded-md" />
            </template>
            <template v-if="example.mode !== 'icon'" #wordmark>
              <Wordmark class="items-center" />
            </template>
            <NavLink href="#" active label="概览" @click.prevent>
              <template #icon><House /></template>
              概览
            </NavLink>
          </Sidebar>
        </template>
        <template #header>
          <SidebarTrigger />
          <Text size="sm" weight="medium">品牌插槽</Text>
        </template>
        <Text size="sm" tone="muted" class="block p-6">{{ example.label }}</Text>
      </AppShell>
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { FileText, House, Images, Settings } from '@lucide/vue'
  import {
    AppShell,
    Avatar,
    Heading,
    Inline,
    NavLink,
    Sidebar,
    SidebarGroup,
    SidebarLabel,
    SidebarTrigger,
    Stack,
    Text,
  } from '@hina-ui/vue'

  const selected = ref('overview')
  const groups = [
    {
      label: '内容',
      items: [
        { id: 'overview', label: '概览', icon: House },
        { id: 'articles', label: '文章', icon: FileText },
        { id: 'library', label: '媒体库', icon: Images },
      ],
    },
    { label: '管理', items: [{ id: 'settings', label: '设置', icon: Settings }] },
  ]
</script>

<template>
  <AppShell mobile-title="Hina UI" class="border-line h-112 w-full rounded-lg border">
    <template #sidebar>
      <Sidebar>
        <template #header>
          <Inline gap="sm" align="center" :wrap="false">
            <Avatar src="/favicon.png" name="Hina UI" class="rounded-md" />
            <SidebarLabel as="div" class="flex-1">
              <Stack gap="none">
                <Text weight="medium" class="truncate">Hina UI</Text>
                <Text size="xs" tone="muted" class="truncate">工作空间</Text>
              </Stack>
            </SidebarLabel>
          </Inline>
        </template>

        <SidebarGroup v-for="group in groups" :key="group.label" :label="group.label">
          <NavLink
            v-for="item in group.items"
            :key="item.id"
            :href="`#${item.id}`"
            :label="item.label"
            :active="selected === item.id"
            @click.prevent="selected = item.id"
          >
            <template #icon><component :is="item.icon" /></template>
            {{ item.label }}
          </NavLink>
        </SidebarGroup>

        <template #footer>
          <Inline gap="sm" align="center" :wrap="false">
            <Avatar src="/avatars/paper.webp" name="星见书音" />
            <SidebarLabel as="div" class="flex-1">
              <Stack gap="none">
                <Text size="sm" weight="medium" class="truncate">星见书音</Text>
                <Text size="xs" tone="muted" class="truncate">管理员</Text>
              </Stack>
            </SidebarLabel>
          </Inline>
        </template>
      </Sidebar>
    </template>
    <template #header>
      <SidebarTrigger />
      <Heading :level="2" size="sm" class="truncate">创作者中心</Heading>
    </template>
    <Stack gap="sm" class="p-6">
      <Heading :level="3" size="sm">
        {{ groups.flatMap(group => group.items).find(item => item.id === selected)?.label }}
      </Heading>
      <Text size="sm" tone="muted">切换侧栏，观察标识、分组与页脚的位置。窄屏时打开抽屉。</Text>
    </Stack>
  </AppShell>
</template>