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="Overview">Overview</NavLink>
        <NavLink href="#" label="My shelf">My shelf</NavLink>
        <NavLink href="#" label="Favourites">Favourites</NavLink>
      </Sidebar>
    </template>

    <Text size="sm" tone="muted" class="block p-6">Sidebar entries go in the default slot.</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="Overview">Overview</NavLink>
        <SidebarGroup label="Library">
          <NavLink href="#" label="Galgame">Galgame</NavLink>
          <NavLink href="#" label="Light novels">Light novels</NavLink>
        </SidebarGroup>
        <SidebarGroup label="Creating" :default-open="false">
          <NavLink href="#" label="My entries">My entries</NavLink>
          <NavLink href="#" label="Drafts">Drafts</NavLink>
        </SidebarGroup>
      </Sidebar>
    </template>

    <Text size="sm" tone="muted" class="block p-6">The “Creating” group starts collapsed.</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: 'Icon and wordmark' },
    { mode: 'wordmark', label: 'Wordmark only' },
    { mode: 'icon', label: 'Icon only' },
  ]
</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="Overview" @click.prevent>
              <template #icon><House /></template>
              Overview
            </NavLink>
          </Sidebar>
        </template>
        <template #header>
          <SidebarTrigger />
          <Text size="sm" weight="medium">Brand slots</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: 'Content',
      items: [
        { id: 'overview', label: 'Overview', icon: House },
        { id: 'articles', label: 'Articles', icon: FileText },
        { id: 'library', label: 'Media library', icon: Images },
      ],
    },
    { label: 'Manage', items: [{ id: 'settings', label: 'Settings', 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">Workspace</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="Shion Hoshimi" />
            <SidebarLabel as="div" class="flex-1">
              <Stack gap="none">
                <Text size="sm" weight="medium" class="truncate">Shion Hoshimi</Text>
                <Text size="xs" tone="muted" class="truncate">Administrator</Text>
              </Stack>
            </SidebarLabel>
          </Inline>
        </template>
      </Sidebar>
    </template>
    <template #header>
      <SidebarTrigger />
      <Heading :level="2" size="sm" class="truncate">Creator workspace</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">
        Toggle the sidebar to see the logo, groups and footer stay in place. On narrow screens, the
        button opens the drawer.
      </Text>
    </Stack>
  </AppShell>
</template>