@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/sidebar/SidebarLayout03.svelte

@@ -0,0 +1,108 @@
+<!--
+  SidebarLayout03.svelte
+  Full sidebar with collapsible groups and user avatar at bottom.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Button, Avatar } from '$lib/components/ui';
+  import { DynamicIcon } from '$lib/components/ui/icon';
+  import Separator from '$lib/components/ui/Separator.svelte';
+
+  let {
+    class: className = '',
+    groups = [],
+    user = undefined,
+    children
+  }: {
+    class?: string;
+    groups?: Array<{
+      title: string;
+      items: Array<{ label: string; href: string; icon?: string; active?: boolean }>;
+    }>;
+    user?: {
+      name: string;
+      email: string;
+      avatar?: string;
+    };
+    children?: Snippet;
+  } = $props();
+
+  let collapsedGroups: Record<string, boolean> = $state({});
+
+  function toggleGroup(title: string) {
+    collapsedGroups[title] = !collapsedGroups[title];
+  }
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Sidebar -->
+  <aside class="flex w-64 flex-col border-r bg-background">
+    <!-- Header -->
+    <div class="flex h-14 items-center gap-2 border-b px-4">
+      <!-- Lucide: Layers -->
+      <span class="flex h-6 w-6 items-center justify-center rounded bg-primary text-xs text-primary-foreground">A</span>
+      <span class="font-semibold">Application</span>
+    </div>
+
+    <!-- Collapsible Groups -->
+    <nav class="flex-1 overflow-y-auto p-3">
+      {#each groups as group}
+        <div class="mb-2">
+          <button
+            type="button"
+            class="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
+            onclick={() => toggleGroup(group.title)}
+          >
+            {group.title}
+            <!-- Lucide: ChevronDown / ChevronRight -->
+            <span class="text-xs">
+              {collapsedGroups[group.title] ? '>' : 'v'}
+            </span>
+          </button>
+          {#if !collapsedGroups[group.title]}
+            <ul class="mt-1 space-y-0.5">
+              {#each group.items as item}
+                <li>
+                  <a
+                    href={item.href}
+                    class={cn(
+                      'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+                      item.active
+                        ? 'bg-muted font-medium text-foreground'
+                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                    )}
+                  >
+                    {#if item.icon}
+                      <DynamicIcon name={item.icon} size={16} />
+                    {/if}
+                    {item.label}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </div>
+      {/each}
+    </nav>
+
+    <!-- User Section -->
+    {#if user}
+      <div class="border-t p-3">
+        <Separator class="mb-3" />
+        <div class="flex items-center gap-3 rounded-md px-2 py-1.5">
+          <Avatar src={user.avatar} alt={user.name} class="h-8 w-8" />
+          <div class="flex-1 overflow-hidden">
+            <p class="truncate text-sm font-medium">{user.name}</p>
+            <p class="truncate text-xs text-muted-foreground">{user.email}</p>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </aside>
+
+  <!-- Main Content -->
+  <main class="flex-1 overflow-y-auto">
+    {@render children?.()}
+  </main>
+</div>

package/src/registry/blocks/sidebar/SidebarLayout04.svelte

@@ -0,0 +1,111 @@
+<!--
+  SidebarLayout04.svelte
+  Sidebar with tree-style nested/expandable items.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { DynamicIcon } from '$lib/components/ui/icon';
+
+  /**
+   * Recursive tree item structure.
+   * Each item can have children for nesting.
+   */
+  interface TreeItem {
+    label: string;
+    href?: string;
+    icon?: string;
+    active?: boolean;
+    children?: TreeItem[];
+  }
+
+  let {
+    class: className = '',
+    items = [],
+    title = 'Explorer',
+    _depth = 0,
+    _isNested = false,
+    children
+  }: {
+    class?: string;
+    items?: TreeItem[];
+    title?: string;
+    _depth?: number;
+    _isNested?: boolean;
+    children?: Snippet;
+  } = $props();
+
+  let expandedItems: Record<string, boolean> = $state({});
+
+  function toggleItem(label: string) {
+    expandedItems[label] = !expandedItems[label];
+  }
+</script>
+
+{#if _isNested}
+  <!-- Recursive rendering of nested items -->
+  <ul class="space-y-0.5">
+    {#each items as item}
+      <li>
+        {#if item.children && item.children.length > 0}
+          <button
+            type="button"
+            class={cn(
+              'flex w-full items-center gap-1.5 rounded-md py-1 text-sm transition-colors hover:bg-muted',
+              item.active ? 'font-medium text-foreground' : 'text-muted-foreground hover:text-foreground'
+            )}
+            style="padding-left: {_depth * 12 + 8}px"
+            onclick={() => toggleItem(item.label)}
+          >
+            <!-- Lucide: ChevronRight / ChevronDown -->
+            <span class="flex h-4 w-4 shrink-0 items-center justify-center text-xs">
+              {expandedItems[item.label] ? 'v' : '>'}
+            </span>
+            {#if item.icon}
+              <DynamicIcon name={item.icon} size={16} />
+            {/if}
+            <span class="truncate">{item.label}</span>
+          </button>
+          {#if expandedItems[item.label]}
+            <svelte:self items={item.children} _depth={_depth + 1} _isNested={true} />
+          {/if}
+        {:else}
+          <a
+            href={item.href || '#'}
+            class={cn(
+              'flex items-center gap-1.5 rounded-md py-1 text-sm transition-colors hover:bg-muted',
+              item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:text-foreground'
+            )}
+            style="padding-left: {_depth * 12 + 24}px"
+          >
+            {#if item.icon}
+              <DynamicIcon name={item.icon} size={16} />
+            {/if}
+            <span class="truncate">{item.label}</span>
+          </a>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+{:else}
+  <!-- Top-level layout -->
+  <div class={cn('flex h-screen', className)}>
+    <!-- Sidebar -->
+    <aside class="flex w-64 flex-col border-r bg-background">
+      <!-- Header -->
+      <div class="flex h-14 items-center border-b px-4">
+        <span class="text-sm font-semibold uppercase tracking-wider text-muted-foreground">{title}</span>
+      </div>
+
+      <!-- Tree Nav -->
+      <nav class="flex-1 overflow-y-auto p-3">
+        <svelte:self {items} _depth={0} _isNested={true} />
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 overflow-y-auto">
+      {@render children?.()}
+    </main>
+  </div>
+{/if}

package/src/registry/blocks/sidebar/SidebarLayout05.svelte

@@ -0,0 +1,103 @@
+<!--
+  SidebarLayout05.svelte
+  Dashboard sidebar with main nav + footer actions (settings, help).
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { DynamicIcon } from '$lib/components/ui/icon';
+  import Separator from '$lib/components/ui/Separator.svelte';
+
+  let {
+    class: className = '',
+    navItems = [],
+    footerItems = [],
+    title = 'Dashboard',
+    children
+  }: {
+    class?: string;
+    navItems?: Array<{
+      label: string;
+      href: string;
+      icon?: string;
+      active?: boolean;
+      badge?: string;
+    }>;
+    footerItems?: Array<{
+      label: string;
+      href: string;
+      icon?: string;
+    }>;
+    title?: string;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Sidebar -->
+  <aside class="flex w-64 flex-col border-r bg-background">
+    <!-- Header -->
+    <div class="flex h-14 items-center gap-2 border-b px-4">
+      <!-- Lucide: LayoutDashboard -->
+      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-xs font-bold text-primary-foreground">
+        D
+      </span>
+      <span class="font-semibold">{title}</span>
+    </div>
+
+    <!-- Main Nav -->
+    <nav class="flex-1 overflow-y-auto p-3">
+      <ul class="space-y-1">
+        {#each navItems as item}
+          <li>
+            <a
+              href={item.href}
+              class={cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
+                item.active
+                  ? 'bg-muted font-medium text-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )}
+            >
+              {#if item.icon}
+                <DynamicIcon name={item.icon} size={16} />
+              {/if}
+              <span class="flex-1">{item.label}</span>
+              {#if item.badge}
+                <span class="rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
+                  {item.badge}
+                </span>
+              {/if}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+
+    <!-- Footer Actions -->
+    {#if footerItems.length > 0}
+      <div class="border-t p-3">
+        <ul class="space-y-1">
+          {#each footerItems as item}
+            <li>
+              <a
+                href={item.href}
+                class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              >
+                {#if item.icon}
+                  <DynamicIcon name={item.icon} size={16} />
+                {/if}
+                {item.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+  </aside>
+
+  <!-- Main Content -->
+  <main class="flex-1 overflow-y-auto">
+    {@render children?.()}
+  </main>
+</div>

package/src/registry/blocks/sidebar/SidebarLayout06.svelte

@@ -0,0 +1,122 @@
+<!--
+  SidebarLayout06.svelte
+  Documentation sidebar with flat section nav and newsletter subscription at bottom.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Input, Button, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    sections = [],
+    breadcrumbs = [],
+    logo = 'Documentation',
+    version = 'v1.0.1',
+    children
+  }: {
+    class?: string;
+    sections?: Array<{
+      title?: string;
+      links: Array<{ label: string; href: string; active?: boolean; options?: boolean }>;
+    }>;
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    logo?: string;
+    version?: string;
+    children?: Snippet;
+  } = $props();
+
+  let email = $state('');
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Sidebar -->
+  <aside class="flex w-64 flex-col border-r bg-background">
+    <!-- Logo + Version -->
+    <div class="flex items-center gap-2 border-b px-4 py-3">
+      <span class="flex h-6 w-6 items-center justify-center rounded bg-primary text-xs font-bold text-primary-foreground">
+        D
+      </span>
+      <span class="font-semibold text-sm">{logo}</span>
+      <span class="ml-auto text-xs text-muted-foreground">{version}</span>
+      <!-- Lucide: ChevronsUpDown -->
+      <button type="button" class="text-muted-foreground hover:text-foreground">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+      </button>
+    </div>
+
+    <!-- Nav Sections -->
+    <nav class="flex-1 overflow-y-auto px-2 py-3">
+      {#each sections as section}
+        {#if section.title}
+          <p class="mb-1 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">{section.title}</p>
+        {/if}
+        <ul class="mb-4 space-y-0.5">
+          {#each section.links as link}
+            <li>
+              <a
+                href={link.href}
+                class={cn(
+                  'flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors',
+                  link.active
+                    ? 'bg-muted font-medium text-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                )}
+              >
+                <span>{link.label}</span>
+                {#if link.options}
+                  <button type="button" class="text-muted-foreground hover:text-foreground" onclick={(e) => e.preventDefault()}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+                  </button>
+                {/if}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {/each}
+    </nav>
+
+    <!-- Newsletter Subscription -->
+    <div class="border-t p-4">
+      <p class="mb-1 text-sm font-semibold">Subscribe to our newsletter</p>
+      <p class="mb-3 text-xs text-muted-foreground">Opt-in to receive updates and news about the sidebar.</p>
+      <Input
+        type="email"
+        placeholder="Email"
+        bind:value={email}
+        class="mb-2"
+      />
+      <Button class="w-full" size="sm">Subscribe</Button>
+    </div>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="flex flex-1 flex-col overflow-hidden">
+    <!-- Breadcrumb bar -->
+    {#if breadcrumbs.length > 0}
+      <div class="flex items-center gap-2 border-b px-6 py-3">
+        <!-- Lucide: PanelLeft -->
+        <button type="button" class="text-muted-foreground hover:text-foreground">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
+        <Breadcrumb>
+          {#each breadcrumbs as crumb, i}
+            <BreadcrumbItem>
+              {#if crumb.href}
+                <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+              {:else}
+                <span class="text-sm text-foreground">{crumb.label}</span>
+              {/if}
+            </BreadcrumbItem>
+            {#if i < breadcrumbs.length - 1}
+              <BreadcrumbSeparator />
+            {/if}
+          {/each}
+        </Breadcrumb>
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">
+      {@render children?.()}
+    </div>
+  </main>
+</div>

package/src/registry/blocks/sidebar/SidebarLayout07.svelte

@@ -0,0 +1,183 @@
+<!--
+  SidebarLayout07.svelte
+  Collapsible tree navigation sidebar with Platform and Projects sections, user avatar footer.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '$lib/components/ui';
+
+  type NavChild = { label: string; href: string; active?: boolean };
+  type NavItem = {
+    label: string;
+    href?: string;
+    icon?: string;
+    active?: boolean;
+    children?: NavChild[];
+  };
+
+  let {
+    class: className = '',
+    platformItems = [],
+    projectItems = [],
+    breadcrumbs = [],
+    logo = 'Documentation',
+    version = 'v1.0.1',
+    user = { name: 'shadcn', email: 'm@example.com' },
+    children
+  }: {
+    class?: string;
+    platformItems?: NavItem[];
+    projectItems?: NavItem[];
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    logo?: string;
+    version?: string;
+    user?: { name: string; email: string; avatar?: string };
+    children?: Snippet;
+  } = $props();
+
+  let openItems = $state<Set<string>>(new Set());
+
+  function toggle(label: string) {
+    if (openItems.has(label)) {
+      openItems.delete(label);
+    } else {
+      openItems.add(label);
+    }
+    openItems = new Set(openItems);
+  }
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Sidebar -->
+  <aside class="flex w-64 flex-col border-r bg-background">
+    <!-- Logo -->
+    <div class="flex items-center gap-2 border-b px-4 py-3">
+      <span class="flex h-6 w-6 items-center justify-center rounded bg-primary text-xs font-bold text-primary-foreground">D</span>
+      <span class="font-semibold text-sm">{logo}</span>
+      <span class="ml-auto text-xs text-muted-foreground">{version}</span>
+      <button type="button" class="text-muted-foreground hover:text-foreground">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+      </button>
+    </div>
+
+    <!-- Nav -->
+    <nav class="flex-1 overflow-y-auto px-2 py-3">
+      <!-- Platform section -->
+      {#if platformItems.length > 0}
+        <p class="mb-1 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Platform</p>
+        <ul class="mb-4 space-y-0.5">
+          {#each platformItems as item}
+            <li>
+              {#if item.children}
+                <button
+                  type="button"
+                  class={cn(
+                    'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+                    item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  )}
+                  onclick={() => toggle(item.label)}
+                >
+                  <!-- Lucide icon placeholder -->
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
+                  <span class="flex-1 text-left">{item.label}</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cn('transition-transform', openItems.has(item.label) && 'rotate-90')}><path d="m9 18 6-6-6-6"/></svg>
+                </button>
+                {#if openItems.has(item.label)}
+                  <ul class="ml-4 mt-0.5 space-y-0.5 border-l pl-2">
+                    {#each item.children as child}
+                      <li>
+                        <a
+                          href={child.href}
+                          class={cn(
+                            'block rounded-md px-2 py-1.5 text-sm transition-colors',
+                            child.active ? 'font-medium text-foreground' : 'text-muted-foreground hover:text-foreground'
+                          )}
+                        >{child.label}</a>
+                      </li>
+                    {/each}
+                  </ul>
+                {/if}
+              {:else}
+                <a
+                  href={item.href ?? '#'}
+                  class={cn(
+                    'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+                    item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  )}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
+                  <span class="flex-1">{item.label}</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                </a>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+
+      <!-- Projects section -->
+      {#if projectItems.length > 0}
+        <p class="mb-1 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Projects</p>
+        <ul class="space-y-0.5">
+          {#each projectItems as item}
+            <li>
+              <a
+                href={item.href ?? '#'}
+                class={cn(
+                  'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+                  item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                )}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
+                <span class="flex-1">{item.label}</span>
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </nav>
+
+    <!-- User Footer -->
+    <div class="flex items-center gap-3 border-t px-4 py-3">
+      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-medium">
+        {user.name.slice(0, 2).toUpperCase()}
+      </div>
+      <div class="flex-1 overflow-hidden">
+        <p class="truncate text-sm font-medium">{user.name}</p>
+        <p class="truncate text-xs text-muted-foreground">{user.email}</p>
+      </div>
+      <button type="button" class="text-muted-foreground hover:text-foreground">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+      </button>
+    </div>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="flex flex-1 flex-col overflow-hidden">
+    {#if breadcrumbs.length > 0}
+      <div class="flex items-center gap-2 border-b px-6 py-3">
+        <button type="button" class="text-muted-foreground hover:text-foreground">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
+        <Breadcrumb>
+          {#each breadcrumbs as crumb, i}
+            <BreadcrumbItem>
+              {#if crumb.href}
+                <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+              {:else}
+                <span class="text-sm text-foreground">{crumb.label}</span>
+              {/if}
+            </BreadcrumbItem>
+            {#if i < breadcrumbs.length - 1}
+              <BreadcrumbSeparator />
+            {/if}
+          {/each}
+        </Breadcrumb>
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">
+      {@render children?.()}
+    </div>
+  </main>
+</div>