@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/sidebar-05/components/app-sidebar.ts

@@ -0,0 +1,147 @@
+/**
+ * The sidebar-05 app sidebar: the docs logo, version and a search field in
+ * the header, then each docs section as a collapsible menu item whose pages
+ * open in a submenu, with a plus or minus showing its state. A fragment
+ * helper, so the markup is rendered by the server; each section is a native
+ * `<details>`, so it opens and closes with no JavaScript, and the sidebar and
+ * its rail are the kit's elements. Ported from shadcn/ui's sidebar-05.
+ *
+ * The data below is sample data. Replace it with your own, point each `url`
+ * at a real route, and mark the current page with `isActive`.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import { searchForm } from './search-form.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { GalleryVerticalEndIcon, MinusIcon, PlusIcon } from '../../../lib/icons.ts';
+
+interface NavSection {
+  title: string;
+  url: string;
+  items: { title: string; url: string; isActive?: boolean }[];
+}
+
+// This is sample data.
+const data: { navMain: NavSection[] } = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        { title: 'Installation', url: '#' },
+        { title: 'Project Structure', url: '#' },
+      ],
+    },
+    {
+      title: 'Build Your Application',
+      url: '#',
+      items: [
+        { title: 'Routing', url: '#' },
+        { title: 'Data Fetching', url: '#', isActive: true },
+        { title: 'Rendering', url: '#' },
+        { title: 'Caching', url: '#' },
+        { title: 'Styling', url: '#' },
+        { title: 'Optimizing', url: '#' },
+        { title: 'Configuring', url: '#' },
+        { title: 'Testing', url: '#' },
+        { title: 'Authentication', url: '#' },
+        { title: 'Deploying', url: '#' },
+        { title: 'Upgrading', url: '#' },
+        { title: 'Examples', url: '#' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        { title: 'Components', url: '#' },
+        { title: 'File Conventions', url: '#' },
+        { title: 'Functions', url: '#' },
+        { title: 'next.config.js Options', url: '#' },
+        { title: 'CLI', url: '#' },
+        { title: 'Edge Runtime', url: '#' },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        { title: 'Accessibility', url: '#' },
+        { title: 'Fast Refresh', url: '#' },
+        { title: 'Next.js Compiler', url: '#' },
+        { title: 'Supported Browsers', url: '#' },
+        { title: 'Turbopack', url: '#' },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        { title: 'Contribution Guide', url: '#' },
+      ],
+    },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar>
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${sidebarMenuButtonClass({ size: 'lg' })}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${GalleryVerticalEndIcon('size-4')}
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-medium">Documentation</span>
+                <span>v1.0.0</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+        ${searchForm()}
+      </div>
+      <nav aria-label="Docs" data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+          <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+            ${data.navMain.map((section, index) => html`
+              <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                <details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')} ?open=${index === 1}>
+                  <summary data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'cursor-pointer list-none [&::-webkit-details-marker]:hidden')}>
+                    ${section.title}
+                    ${PlusIcon('ml-auto group-open/collapsible:hidden')}
+                    ${MinusIcon('ml-auto hidden group-open/collapsible:block')}
+                  </summary>
+                  ${section.items.length ? html`
+                    <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+                      <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                        ${section.items.map((item) => html`
+                          <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                            <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
+                          </li>
+                        `)}
+                      </ul>
+                    </div>
+                  ` : ''}
+                </details>
+              </li>
+            `)}
+          </ul>
+        </div>
+      </nav>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-05/components/search-form.ts

@@ -0,0 +1,33 @@
+/**
+ * The sidebar-05 search form: a search field at the top of the sidebar. A
+ * fragment helper, so it renders on the server and ships no JavaScript.
+ * Ported from shadcn/ui's sidebar-05.
+ *
+ * The `<form>` has no `action` yet. Point it at your search route as a GET
+ * (`<form action="/search">`), or bind a server action from a `'use server'`
+ * file (`<form action=${search}>`). Until then a submit reloads the page with
+ * `?q=` in the URL.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { labelClass } from '../../../components/label.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarInputClass,
+} from '../../../components/sidebar.ts';
+import { SearchIcon } from '../../../lib/icons.ts';
+
+export function searchForm(opts: { class?: string } = {}) {
+  return html`
+    <form role="search" class=${opts.class ?? null}>
+      <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'py-0')}>
+        <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'relative')}>
+          <label data-slot="label" for="search" class=${cn(labelClass(), 'sr-only')}>Search</label>
+          <input data-slot="sidebar-input" data-sidebar="input" id="search" name="q" placeholder="Search the docs..." class=${cn(sidebarInputClass(), 'pl-8')}>
+          ${SearchIcon('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none')}
+        </div>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/sidebar-05/page.ts

@@ -0,0 +1,58 @@
+/**
+ * The sidebar-05 block's page: a docs-style sidebar whose sections
+ * open and close their submenus, beside a header with a breadcrumb and a
+ * placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-05` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-05.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <ui-sidebar-trigger class="-ml-1"></ui-sidebar-trigger>
+          <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+          <nav aria-label="breadcrumb" data-slot="breadcrumb">
+            <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+              <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+              </li>
+              <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+              <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+              </li>
+            </ol>
+          </nav>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+          </div>
+          <div class="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

package/packages/registry/blocks/sidebar-06/components/app-sidebar.ts

@@ -0,0 +1,105 @@
+/**
+ * The sidebar-06 app sidebar: the docs header, the sections as dropdown
+ * menus, and a newsletter opt-in card in the footer. A fragment helper, so the
+ * markup is rendered by the server; the sidebar, its rail and the menus are
+ * the kit's elements. Ported from shadcn/ui's sidebar-06.
+ *
+ * The data below is sample data. Replace it with your own, and point each
+ * `url` at a real route.
+ */
+import { html } from '@webjsdev/core';
+import {
+  sidebarContentClass,
+  sidebarFooterClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { navMain, type NavMainItem } from './nav-main.ts';
+import { sidebarOptInForm } from './sidebar-opt-in-form.ts';
+import { GalleryVerticalEndIcon } from '../../../lib/icons.ts';
+
+// This is sample data.
+const data: { navMain: NavMainItem[] } = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        { title: 'Installation', url: '#' },
+        { title: 'Project Structure', url: '#' },
+      ],
+    },
+    {
+      title: 'Build Your Application',
+      url: '#',
+      items: [
+        { title: 'Routing', url: '#' },
+        { title: 'Data Fetching', url: '#', isActive: true },
+        { title: 'Rendering', url: '#' },
+        { title: 'Caching', url: '#' },
+        { title: 'Styling', url: '#' },
+        { title: 'Optimizing', url: '#' },
+        { title: 'Configuring', url: '#' },
+        { title: 'Testing', url: '#' },
+        { title: 'Authentication', url: '#' },
+        { title: 'Deploying', url: '#' },
+        { title: 'Upgrading', url: '#' },
+        { title: 'Examples', url: '#' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        { title: 'Components', url: '#' },
+        { title: 'File Conventions', url: '#' },
+        { title: 'Functions', url: '#' },
+        { title: 'next.config.js Options', url: '#' },
+        { title: 'CLI', url: '#' },
+        { title: 'Edge Runtime', url: '#' },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        { title: 'Accessibility', url: '#' },
+        { title: 'Fast Refresh', url: '#' },
+        { title: 'Next.js Compiler', url: '#' },
+        { title: 'Supported Browsers', url: '#' },
+        { title: 'Turbopack', url: '#' },
+      ],
+    },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar>
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${sidebarMenuButtonClass({ size: 'lg' })}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${GalleryVerticalEndIcon('size-4')}
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-medium">Documentation</span>
+                <span>v1.0.0</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${navMain({ items: data.navMain })}
+      </div>
+      <div data-slot="sidebar-footer" data-sidebar="footer" class=${sidebarFooterClass()}>
+        <div class="p-1">${sidebarOptInForm()}</div>
+      </div>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-06/components/nav-main.ts

@@ -0,0 +1,56 @@
+/**
+ * The sidebar-06 main nav: one menu item per section, each opening its pages
+ * as a dropdown menu beside the sidebar. A fragment helper; the menus are the
+ * kit's `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-06.
+ *
+ * Each page is a real link inside its menu item, so a click follows it. Give
+ * the item for the current page `aria-current="page"` on its link.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarGroupClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { MoreHorizontalIcon } from '../../../lib/icons.ts';
+
+export interface NavMainItem {
+  title: string;
+  url: string;
+  icon?: (cls?: string) => TemplateResult;
+  isActive?: boolean;
+  items?: { title: string; url: string; isActive?: boolean }[];
+}
+
+export function navMain({ items }: { items: NavMainItem[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${items.map((item) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <ui-dropdown-menu>
+              <ui-dropdown-menu-trigger>
+                <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+                  ${item.title} ${MoreHorizontalIcon('ml-auto')}
+                </button>
+              </ui-dropdown-menu-trigger>
+              ${item.items?.length
+                ? html`<ui-dropdown-menu-content class="min-w-56 rounded-lg" side="right" align="start">
+                    ${item.items.map((sub) => html`
+                      <ui-dropdown-menu-item>
+                        <a href=${sub.url} class="flex-1 text-inherit no-underline" aria-current=${sub.isActive ? 'page' : null}>${sub.title}</a>
+                      </ui-dropdown-menu-item>
+                    `)}
+                  </ui-dropdown-menu-content>`
+                : ''}
+            </ui-dropdown-menu>
+          </li>
+        `)}
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-06/components/sidebar-opt-in-form.ts

@@ -0,0 +1,44 @@
+/**
+ * The sidebar-06 newsletter card: a title, a line of copy and an email
+ * opt-in form, sized for the sidebar's footer. A fragment helper, so it
+ * renders on the server and ships no JavaScript. Ported from shadcn/ui's
+ * sidebar-06.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${subscribe}>`) before you ship it: the
+ * framework then supplies `method="post"`, and the no-JS post, the 422
+ * re-render with `fieldErrors` / `values`, and the 303 redirect all work.
+ * Until it is bound, the form submits as a GET back to the page.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { sidebarInputClass } from '../../../components/sidebar.ts';
+
+export function sidebarOptInForm() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cn(cardClass(), 'gap-2 py-4 shadow-none')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'px-4')}>
+        <div data-slot="card-title" class=${cn(cardTitleClass(), 'text-sm')}>Subscribe to our newsletter</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>
+          Opt-in to receive updates and news about the sidebar.
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'px-4')}>
+        <form>
+          <div class="grid gap-2.5">
+            <input type="email" name="email" autocomplete="email" placeholder="Email" aria-label="Email" required data-slot="sidebar-input" data-sidebar="input" class=${sidebarInputClass()}>
+            <button type="submit" data-slot="button" class=${cn(buttonClass(), 'w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none')}>Subscribe</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-06/page.ts

@@ -0,0 +1,57 @@
+/**
+ * The sidebar-06 block's page: a sidebar whose sections open as dropdown
+ * menus, beside a header with a breadcrumb and a placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-06` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-06.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <ui-sidebar-trigger class="-ml-1"></ui-sidebar-trigger>
+          <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+          <nav aria-label="breadcrumb" data-slot="breadcrumb">
+            <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+              <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+              </li>
+              <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+              <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+              </li>
+            </ol>
+          </nav>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+          </div>
+          <div class="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

package/packages/registry/blocks/sidebar-07/components/app-sidebar.ts

@@ -0,0 +1,108 @@
+/**
+ * The sidebar-07 app sidebar: a team switcher, the main nav with collapsible
+ * sections, the projects list and the signed-in user, in a sidebar that
+ * collapses to icons (Ctrl+B or Cmd+B, the trigger, or the rail). A fragment
+ * helper, so the markup is rendered by the server; the sidebar, its rail and
+ * the menus are the kit's elements. Ported from shadcn/ui's sidebar-07.
+ *
+ * The data below is sample data. Replace it with your own, and point each
+ * `url` at a real route.
+ */
+import { html } from '@webjsdev/core';
+import {
+  sidebarContentClass,
+  sidebarFooterClass,
+  sidebarHeaderClass,
+} from '../../../components/sidebar.ts';
+import { navMain, type NavMainItem } from './nav-main.ts';
+import { navProjects, type NavProject } from './nav-projects.ts';
+import { navUser } from './nav-user.ts';
+import { teamSwitcher, type Team } from './team-switcher.ts';
+import { AudioLinesIcon, BookOpenIcon, BotIcon, FrameIcon, GalleryVerticalEndIcon, MapIcon, PieChartIcon, Settings2Icon, TerminalIcon, TerminalSquareIcon } from '../../../lib/icons.ts';
+
+// This is sample data.
+const data: {
+  user: { name: string; email: string; avatar: string };
+  teams: Team[];
+  navMain: NavMainItem[];
+  projects: NavProject[];
+} = {
+  user: {
+    name: 'vivek',
+    email: 'vivek@example.com',
+    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+  },
+  teams: [
+    { name: 'Acme Inc', logo: GalleryVerticalEndIcon, plan: 'Enterprise' },
+    { name: 'Acme Corp.', logo: AudioLinesIcon, plan: 'Startup' },
+    { name: 'Evil Corp.', logo: TerminalIcon, plan: 'Free' },
+  ],
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: TerminalSquareIcon,
+      isActive: true,
+      items: [
+        { title: 'History', url: '#' },
+        { title: 'Starred', url: '#' },
+        { title: 'Settings', url: '#' },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: BotIcon,
+      items: [
+        { title: 'Genesis', url: '#' },
+        { title: 'Explorer', url: '#' },
+        { title: 'Quantum', url: '#' },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpenIcon,
+      items: [
+        { title: 'Introduction', url: '#' },
+        { title: 'Get Started', url: '#' },
+        { title: 'Tutorials', url: '#' },
+        { title: 'Changelog', url: '#' },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2Icon,
+      items: [
+        { title: 'General', url: '#' },
+        { title: 'Team', url: '#' },
+        { title: 'Billing', url: '#' },
+        { title: 'Limits', url: '#' },
+      ],
+    },
+  ],
+  projects: [
+    { name: 'Design Engineering', url: '#', icon: FrameIcon },
+    { name: 'Sales & Marketing', url: '#', icon: PieChartIcon },
+    { name: 'Travel', url: '#', icon: MapIcon },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar collapsible="icon">
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        ${teamSwitcher({ teams: data.teams })}
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${navMain({ items: data.navMain })}
+        ${navProjects({ projects: data.projects })}
+      </div>
+      <div data-slot="sidebar-footer" data-sidebar="footer" class=${sidebarFooterClass()}>
+        ${navUser({ user: data.user })}
+      </div>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}