Sidebar

<script lang="ts">
  import { Sidebar } from 'sv5ui';
  import type { NavigationMenuItem } from 'sv5ui';

  const items: NavigationMenuItem[] = [
    { label: 'Dashboard', icon: 'lucide:layout-dashboard', href: '/' },
    { label: 'Projects', icon: 'lucide:folder', href: '/projects' },
    { label: 'Team', icon: 'lucide:users', href: '/team' },
    { label: 'Settings', icon: 'lucide:settings', href: '/settings' }
  ];
</script>

<!-- The sidebar is a flex child, so put it next to your content -->
<div class="flex">
  <Sidebar title="Acme Inc" {items} />
  <main class="flex-1 p-6">
    <slot />
  </main>
</div>

<!-- +layout.svelte: the canonical dashboard shell -->
<script lang="ts">
  import { Sidebar, SidebarTrigger, Header, Main } from 'sv5ui';
  import type { SidebarApi } from 'sv5ui';

  let api = $state<SidebarApi>();
  let { children } = $props();
</script>

<div class="flex min-h-svh">
  <Sidebar bind:api title="Acme Inc" {items} persist rail />

  <div class="flex min-w-0 flex-1 flex-col">
    <Header>
      {#snippet left()}
        <SidebarTrigger {api} />
      {/snippet}
    </Header>

    <Main>{@render children()}</Main>
  </div>
</div>

<!-- The header row of the sidebar is
     --ui-sidebar-header-height tall, falling back to
     --ui-header-height and then 4rem, so it lines up with
     the Header next to it without any extra work. -->

<!-- sidebar (default): flush to the edge with a divider border -->
<Sidebar variant="sidebar" {items} />

<!-- floating: a detached, rounded, elevated panel -->
<Sidebar variant="floating" {items} />

<!-- inset: transparent, for an inset dashboard layout where the
     content area is the card and the sidebar is the background -->
<Sidebar variant="inset" {items} />

<!-- icon (default): collapses to an icon rail. Labels come back
     as tooltips and groups open as popover flyouts. -->
<Sidebar collapsible="icon" collapsedWidth={64} {items} />

<!-- offcanvas: collapses fully off-screen -->
<Sidebar collapsible="offcanvas" {items} />

<!-- none: cannot be collapsed. rail, close and toggle
     are not rendered at all, so do not bother passing them. -->
<Sidebar collapsible="none" {items} />

<!-- collapsed is bindable. Bind it rather than passing a literal,
     otherwise the rail and toggle mutate a value you own. -->
<Sidebar bind:collapsed collapsible="icon" rail {items} />

<!-- Three opt-in ways to collapse, none of them on by default -->

<!-- rail: a draggable-looking edge strip, click to toggle -->
<Sidebar rail {items} />

<!-- close: a button in the header -->
<Sidebar close {items} closeIcon="lucide:panel-left-close" />

<!-- toggle: a button pinned to the bottom of the footer -->
<Sidebar toggle={{ label: 'Collapse', variant: 'ghost' }} {items} />

<!-- Or drive it from anywhere with the api -->
<Button label="Toggle" onclick={() => api?.toggle()} />

<script lang="ts">
  import { Sidebar, SidebarTrigger } from 'sv5ui';
  import type { SidebarApi } from 'sv5ui';

  let api = $state<SidebarApi>();
</script>

<!-- Preferred: pass the api. It already knows the breakpoint,
     so the trigger collapses the rail on desktop and opens the
     mobile menu on small screens with nothing repeated. -->
<Sidebar bind:api breakpoint="lg" {items} />
<SidebarTrigger {api} />

<!-- Without an api, bind the two states and repeat the breakpoint -->
<Sidebar bind:collapsed bind:open breakpoint="lg" {items} />
<SidebarTrigger bind:collapsed bind:open breakpoint="lg" />

<!-- SidebarTrigger extends ButtonProps, so style it like any button -->
<SidebarTrigger {api} variant="ghost" size="sm" icon="lucide:menu" />

<script lang="ts">
  let api = $state<SidebarApi>();
</script>

<Sidebar bind:api {items} />

<!-- toggle / expand / collapse act on the mobile menu below
     breakpoint and on the desktop rail above it -->
<Button label="Toggle" onclick={() => api?.toggle()} />
<Button label="Expand" onclick={() => api?.expand()} />

<p>
  collapsed: {api?.collapsed}
  open: {api?.open}
  below breakpoint: {api?.below}
  state: {api?.state}
</p>

<!-- bind:collapsed and bind:open still work alongside it -->
<Sidebar bind:api bind:collapsed bind:open {items} />

<!-- An array of arrays renders separated groups -->
const items: NavigationMenuItem[][] = [
  [
    { label: 'Workspace', type: 'label' },
    { label: 'Dashboard', icon: 'lucide:layout-dashboard', href: '/' },
    {
      label: 'Projects',
      icon: 'lucide:folder',
      defaultOpen: true,
      children: [
        { label: 'Active', href: '/projects/active' },
        { label: 'Archived', href: '/projects/archived' }
      ]
    }
  ],
  [
    { label: 'Settings', icon: 'lucide:settings', href: '/settings' },
    { label: 'Help', icon: 'lucide:circle-help', href: '/help' }
  ]
];

<Sidebar {items} />

<!-- menu forwards anything to the internal NavigationMenu and
     overrides the defaults Sidebar sets -->
<Sidebar
  {items}
  menu={{ variant: 'link', color: 'success', highlight: true, exact: false, type: 'single' }}
/>

<!-- header replaces the whole default header, typically with
     a brand mark or a team switcher. Every snippet receives
     the collapsed state so you can shrink its content. -->
<Sidebar {items} bind:api>
  {#snippet header({ collapsed })}
    <div class="flex h-full items-center gap-2 px-3">
      <Logo class="size-7" />
      {#if !collapsed}<span class="font-semibold">Acme Inc</span>{/if}
    </div>
  {/snippet}

  {#snippet footer({ collapsed })}
    <DropdownMenu items={userMenu}>
      {#snippet trigger({ props })}
        <button {...props} class="flex items-center gap-2">
          <Avatar src="/avatars/ana.jpg" alt="Ana" size="sm" />
          {#if !collapsed}<span class="text-sm">Ana Rivera</span>{/if}
        </button>
      {/snippet}
    </DropdownMenu>
  {/snippet}

  <!-- children renders inside the scrollable body, after the nav -->
  {#snippet children({ collapsed })}
    {#if !collapsed}
      <UpgradeCard class="mt-auto" />
    {/if}
  {/snippet}
</Sidebar>

<!-- Widths are numbers in pixels -->
<Sidebar width={288} collapsedWidth={56} {items} />

<!-- Persist the collapsed state across reloads.
     true uses the localStorage key 'sidebar'. -->
<Sidebar persist {items} />
<Sidebar persist={{ key: 'admin-sidebar' }} {items} />

<!-- Turn off the collapse and group animations -->
<Sidebar transition={false} {items} />

<!-- Below breakpoint the sidebar hides and becomes an overlay
     that slides in from side. -->
<Sidebar breakpoint="lg" mode="slideover" {items} />

<!-- Or use the Drawer, with its grab handle and snap behaviour -->
<Sidebar breakpoint="md" mode="drawer" {items} />

<!-- The overlay closes itself on navigation. Turn that off if
     your routes render inside the same shell. -->
<Sidebar autoClose={false} {items} />

<!-- Below the breakpoint the sidebar renders nothing inline, so the
     trigger has to live somewhere that is always visible. The panel
     is portalled and covers the viewport, not its parent. -->
<div class="flex h-14 items-center gap-3 border-b px-3">
  <SidebarTrigger api={mobileApi} variant="ghost" color="surface" size="sm" />
  <span class="text-sm font-medium">Acme Inc</span>
</div>

<div class="flex">
  <Sidebar bind:api={mobileApi} title="Acme Inc" {items} breakpoint="xl" mode="drawer" />
  <main class="flex-1">...</main>
</div>

<!-- side="right" moves the sidebar to the end of the row.
     The rail, the border and the mobile overlay all follow. -->
<div class="flex">
  <main class="flex-1">...</main>
  <Sidebar side="right" {items} />
</div>

<!-- Note the DOM order does not have to change: the root gets
     order-last, so you can keep the Sidebar first in markup. -->

/* The header row height, so the sidebar lines up with a
   sibling Header. Falls back to --ui-header-height, then 4rem. */
--ui-sidebar-header-height

/* Minimum height of the footer row. Defaults to 4rem. */
--ui-sidebar-footer-height

/* Set them once on :root, or per instance */
<Sidebar {items} style="--ui-sidebar-header-height: 3.5rem" />

/* Everything else goes through ui: */
<Sidebar
  {items}
  ui={{
    root: 'bg-surface-container-low',
    header: 'border-b-0',
    content: 'p-2'
  }}
/>