AppShell

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

<template>
  <AppShell class="border-line h-72 w-full rounded-lg border">
    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="Overview">Overview</NavLink>
        <NavLink href="#" label="My shelf">My shelf</NavLink>
      </Sidebar>
    </template>

    <Text size="sm" tone="muted" class="block p-6">Main content goes in the default slot.</Text>
  </AppShell>
</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,
    type SidebarState,
  } 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 }] },
  ]
  const examples = ref<{ mode: 'rail' | 'hidden'; state: SidebarState }[]>([
    { mode: 'rail', state: 'expanded' },
    { mode: 'hidden', state: 'expanded' },
  ])
</script>

<template>
  <Stack gap="lg" class="w-full">
    <Stack v-for="example in examples" :key="example.mode" gap="sm">
      <Text size="sm" tone="faint">collapsible="{{ example.mode }}" · {{ example.state }}</Text>
      <AppShell
        v-model:sidebar="example.state"
        :collapsible="example.mode"
        mobile-title="Hina UI"
        class="border-line h-112 w-full rounded-lg border"
      >
        <template #sidebar>
          <Sidebar>
            <template #icon>
              <Avatar src="/favicon.png" name="Hina UI" class="rounded-md" />
            </template>
            <template #wordmark>
              <Stack gap="none">
                <Text weight="medium" class="truncate">Hina UI</Text>
                <Text size="xs" tone="muted" class="truncate">Workspace</Text>
              </Stack>
            </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>
    </Stack>
  </Stack>
</template>

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

  const paragraphs = Array.from({ length: 12 }, (_, i) => `Paragraph ${i + 1}.`)
</script>

<template>
  <AppShell class="border-line h-72 w-full rounded-lg border">
    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="Body">Body</NavLink>
        <NavLink href="#" label="Notes">Notes</NavLink>
      </Sidebar>
    </template>

    <template #header>
      <Heading :level="2" size="sm">The header does not scroll with the content</Heading>
    </template>

    <Stack gap="sm" class="p-6">
      <Text v-for="p in paragraphs" :key="p" size="sm" tone="muted">{{ p }}</Text>
    </Stack>
  </AppShell>
</template>

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

<template>
  <AppShell collapsible="hidden" class="border-line h-96 w-full rounded-lg border">
    <template #banner>
      <Banner closable>
        Hina UI 1.2 is out.
        <Link href="#" underline>Read the release notes</Link>
      </Banner>
    </template>

    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="Home">Home</NavLink>
        <NavLink href="#" label="My shelf">My shelf</NavLink>
      </Sidebar>
    </template>

    <template #header>
      <SidebarTrigger />
      <Heading :level="2" size="sm">Home</Heading>
    </template>

    <Text size="sm" tone="muted" class="block p-6">
      Close the banner and the sidebar and main area move up to fill the space.
    </Text>
  </AppShell>
</template>