SidebarLayout

<script>
  import { Button, MenuIcon, SidebarLayout, ThemeSwitcher } from '@urbicon-ui/blocks';
  let sidebarOpen = $state(false);
</script>

<SidebarLayout bind:open={sidebarOpen} sidebarWidth="16rem">
  {#snippet sidebarHeader()}
    <a href="/" class="flex h-14 items-center font-semibold">My App</a>
  {/snippet}

  {#snippet sidebar()}
    <nav aria-label="Demo sidebar" class="flex flex-col gap-1 p-3">
      <a href="/dashboard" class="rounded-lg px-3 py-2 text-sm">Dashboard</a>
      <a href="/projects" class="rounded-lg px-3 py-2 text-sm">Projects</a>
      <a href="/settings" class="rounded-lg px-3 py-2 text-sm">Settings</a>
    </nav>
  {/snippet}

  {#snippet sidebarFooter()}
    <div class="flex items-center justify-between p-3">
      <span class="text-text-tertiary text-xs">v1.0.0</span>
      <ThemeSwitcher size="xs" />
    </div>
  {/snippet}

  {#snippet mobileHeader({ openSidebar })}
    <Button variant="ghost" size="sm" onclick={openSidebar} aria-label="Open menu">
      <MenuIcon class="h-5 w-5" />
    </Button>
    <span class="font-semibold">My App</span>
  {/snippet}

  <h1 class="text-2xl font-bold">Page content</h1>
  <p class="text-text-secondary mt-2">Goes inside a centered, max-width column.</p>
</SidebarLayout>

<script>
  import { page } from '$app/state';
  import { SidebarLayout, Button, MenuIcon, HomeIcon, UsersIcon, SettingsIcon } from '@urbicon-ui/blocks';

  const sections = [
    { label: 'Overview', items: [{ href: '/', label: 'Dashboard', icon: HomeIcon }] },
    {
      label: 'Workspace',
      items: [
        { href: '/team', label: 'Team', icon: UsersIcon },
        { href: '/settings', label: 'Settings', icon: SettingsIcon }
      ]
    }
  ];

  let sidebarOpen = $state(false);
  const path = $derived(page.url.pathname);
  const isActive = (href) => href === '/' ? path === '/' : path === href || path.startsWith(`${href}/`);
  const activeItem = $derived(
    sections.flatMap((s) => s.items)
      .sort((a, b) => b.href.length - a.href.length)
      .find((i) => isActive(i.href))
  );
</script>

<SidebarLayout bind:open={sidebarOpen} sidebarWidth="17rem">
  {#snippet sidebarHeader()}
    <a href="/" class="flex h-14 items-center font-semibold">My App</a>
  {/snippet}

  {#snippet sidebar()}
    <nav aria-label="Demo sidebar" class="flex flex-col gap-6 p-3">
      {#each sections as section, i (section.label ?? i)}
        <div class="flex flex-col gap-1">
          <span class="text-text-tertiary px-3 pb-1 text-2xs font-semibold uppercase tracking-wider">
            {section.label}
          </span>
          {#each section.items as item (item.href)}
            {@const Icon = item.icon}
            <a href={item.href} class={isActive(item.href)
              ? 'bg-primary-subtle text-primary flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium'
              : 'text-text-secondary hover:bg-surface-hover flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm'}>
              <Icon class="h-4 w-4 shrink-0" />
              <span class="truncate">{item.label}</span>
            </a>
          {/each}
        </div>
      {/each}
    </nav>
  {/snippet}

  {#snippet mobileHeader({ openSidebar })}
    <Button variant="ghost" size="sm" onclick={openSidebar} aria-label="Open menu">
      <MenuIcon class="h-5 w-5" />
    </Button>
    {#if activeItem}
      <span class="font-semibold truncate">{activeItem.label}</span>
    {/if}
  {/snippet}

  <!-- page content -->
</SidebarLayout>

<script>
  import { SidebarLayout, Button, MenuIcon, createPersistentState } from '@urbicon-ui/blocks';

  const railOpen = createPersistentState({ key: 'sidebar', defaultValue: true });
</script>

<SidebarLayout bind:open={railOpen.value} mode="collapsible" sidebarWidth="16rem">
  {#snippet sidebarHeader()}<span class="font-semibold">App</span>{/snippet}
  {#snippet sidebar()}<nav class="p-3"><!-- … --></nav>{/snippet}

  {#snippet toggle(rail)}
    <Button
      variant="ghost"
      size="sm"
      {...rail.triggerProps}
      onclick={rail.toggle}
      aria-label={rail.open ? 'Collapse sidebar' : 'Expand sidebar'}
    >
      <MenuIcon class="h-5 w-5" />
    </Button>
  {/snippet}

  <!-- page content -->
</SidebarLayout>

<SidebarLayout side="right" sidebarWidth="20rem">
  {#snippet sidebar()}
    <div class="p-4">Inspector content…</div>
  {/snippet}
  <!-- main content (occupies left side) -->
</SidebarLayout>

<SidebarLayout
  bind:open={sidebarOpen}
  sidebarWidth="16rem"
  slotClasses={{
    root: 'bg-neutral-50',
    sidebarPanel: 'bg-neutral-900 border-neutral-800',
    sidebarHeader: 'border-neutral-800',
    sidebarFooter: 'border-neutral-800',
    mobileHeader: 'bg-neutral-900 text-white border-neutral-800'
  }}
>
  <!-- snippets -->
</SidebarLayout>

<BlocksProvider
  presets={{
    SidebarLayout: {
      brand: {
        slotClasses: {
          sidebarPanel: 'bg-neutral-900 border-neutral-800',
          mobileHeader: 'bg-neutral-900 text-white'
        }
      }
    }
  }}
>
  <SidebarLayout preset="brand" bind:open={sidebarOpen}>
    <!-- … -->
  </SidebarLayout>
</BlocksProvider>

<SidebarLayout contentMaxWidth="2xl" bind:open={sidebarOpen}>
  <!-- content uses max-w-screen-2xl -->
</SidebarLayout>

<SidebarLayout contentMaxWidth="none" bind:open={sidebarOpen}>
  <!-- content stretches to fill the available width -->
</SidebarLayout>