@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/sidebar-08/components/nav-user.ts

@@ -0,0 +1,70 @@
+/**
+ * The sidebar-08 user menu: the signed-in user's avatar, name and email,
+ * opening an account menu. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-08.
+ *
+ * The menu items are placeholders. Make "Log out" a form that posts to your
+ * sign-out action, and the others links to your account pages.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { avatarClass, avatarFallbackClass, avatarImageClass } from '../../../components/avatar.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from '../../../lib/icons.ts';
+
+function userAvatar(user: { name: string; avatar: string }) {
+  return html`<span data-slot="avatar" data-size="default" class=${cn(avatarClass(), 'h-8 w-8 rounded-lg')}>
+    <span data-slot="avatar-fallback" class=${cn(avatarFallbackClass(), 'rounded-lg')}>VK</span>
+    <img data-slot="avatar-image" src=${user.avatar} alt="@vivek" class=${avatarImageClass()}>
+  </span>`;
+}
+
+function userText(user: { name: string; email: string }) {
+  return html`<div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-medium">${user.name}</span>
+    <span class="truncate text-xs">${user.email}</span>
+  </div>`;
+}
+
+export function navUser({ user }: { user: { name: string; email: string; avatar: string } }) {
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <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="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+              ${userAvatar(user)}
+              ${userText(user)}
+              ${ChevronsUpDownIcon('ml-auto size-4')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg" side="right" align="end">
+            <ui-dropdown-menu-label class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                ${userAvatar(user)}
+                ${userText(user)}
+              </div>
+            </ui-dropdown-menu-label>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${SparklesIcon()}Upgrade to Pro</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${BadgeCheckIcon()}Account</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${CreditCardIcon()}Billing</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${BellIcon()}Notifications</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item>${LogOutIcon()}Log out</ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

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

@@ -0,0 +1,59 @@
+/**
+ * The sidebar-08 block's page: an inset sidebar with a secondary nav, beside a
+ * header with a breadcrumb and a placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-08` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-08.
+ */
+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">
+          <div class="flex items-center gap-2 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>
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <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-09/components/app-sidebar.ts

@@ -0,0 +1,213 @@
+/**
+ * The sidebar-09 app sidebar: two sidebars nested in one. The first is an
+ * icon rail of mail folders with the user menu; the second lists the open
+ * folder's messages with an unread filter and a search field. The whole
+ * sidebar collapses to the rail. A fragment helper, so the markup is rendered
+ * by the server; the sidebars and the menu are the kit's elements. Ported
+ * from shadcn/ui's sidebar-09.
+ *
+ * shadcn keeps the open folder and its messages in React state and reshuffles
+ * the list on each click. Here the first folder renders as the open one and
+ * each folder is a link: in your app the folder is a route segment or a
+ * search param, so render its messages on the server and mark its link
+ * `data-active="true"` and `aria-current="page"`.
+ *
+ * The data below is sample data. Replace it with your own.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { labelClass } from '../../../components/label.ts';
+import '../../../components/switch.ts';
+import {
+  sidebarContentClass,
+  sidebarFooterClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarHeaderClass,
+  sidebarInputClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { navUser } from './nav-user.ts';
+import { ArchiveXIcon, CommandIcon, FileIcon, InboxIcon, SendIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+interface Folder {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+  isActive: boolean;
+}
+
+interface Mail {
+  name: string;
+  email: string;
+  subject: string;
+  date: string;
+  teaser: string;
+}
+
+// This is sample data.
+const data: {
+  user: { name: string; email: string; avatar: string };
+  navMain: Folder[];
+  mails: Mail[];
+} = {
+  user: {
+    name: 'vivek',
+    email: 'vivek@example.com',
+    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+  },
+  navMain: [
+    { title: 'Inbox', url: '#', icon: InboxIcon, isActive: true },
+    { title: 'Drafts', url: '#', icon: FileIcon, isActive: false },
+    { title: 'Sent', url: '#', icon: SendIcon, isActive: false },
+    { title: 'Junk', url: '#', icon: ArchiveXIcon, isActive: false },
+    { title: 'Trash', url: '#', icon: Trash2Icon, isActive: false },
+  ],
+  mails: [
+    {
+      name: 'William Smith',
+      email: 'williamsmith@example.com',
+      subject: 'Meeting Tomorrow',
+      date: '09:34 AM',
+      teaser: 'Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.',
+    },
+    {
+      name: 'Alice Smith',
+      email: 'alicesmith@example.com',
+      subject: 'Re: Project Update',
+      date: 'Yesterday',
+      teaser: "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.",
+    },
+    {
+      name: 'Bob Johnson',
+      email: 'bobjohnson@example.com',
+      subject: 'Weekend Plans',
+      date: '2 days ago',
+      teaser: "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?",
+    },
+    {
+      name: 'Emily Davis',
+      email: 'emilydavis@example.com',
+      subject: 'Re: Question about Budget',
+      date: '2 days ago',
+      teaser: "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?",
+    },
+    {
+      name: 'Michael Wilson',
+      email: 'michaelwilson@example.com',
+      subject: 'Important Announcement',
+      date: '1 week ago',
+      teaser: "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.",
+    },
+    {
+      name: 'Sarah Brown',
+      email: 'sarahbrown@example.com',
+      subject: 'Re: Feedback on Proposal',
+      date: '1 week ago',
+      teaser: "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?",
+    },
+    {
+      name: 'David Lee',
+      email: 'davidlee@example.com',
+      subject: 'New Project Idea',
+      date: '1 week ago',
+      teaser: "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?",
+    },
+    {
+      name: 'Olivia Wilson',
+      email: 'oliviawilson@example.com',
+      subject: 'Vacation Plans',
+      date: '1 week ago',
+      teaser: "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.",
+    },
+    {
+      name: 'James Martin',
+      email: 'jamesmartin@example.com',
+      subject: 'Re: Conference Registration',
+      date: '1 week ago',
+      teaser: "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.",
+    },
+    {
+      name: 'Sophia White',
+      email: 'sophiawhite@example.com',
+      subject: 'Team Dinner',
+      date: '1 week ago',
+      teaser: "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.",
+    },
+  ],
+};
+
+export function appSidebar() {
+  const active = data.navMain.find((item) => item.isActive) ?? data.navMain[0];
+  return html`
+    <ui-sidebar collapsible="icon" class="overflow-hidden **:data-[slot=sidebar-inner]:flex-row" style="--sidebar-width: 350px">
+      <ui-sidebar collapsible="none" class="w-[calc(var(--sidebar-width-icon)+1px)]! border-r">
+        <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=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'md:h-8 md:p-0')}>
+                <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  ${CommandIcon('size-4')}
+                </div>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-medium">Acme Inc</span>
+                  <span class="truncate text-xs">Enterprise</span>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+          <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+            <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'px-1.5 md:px-0')}>
+              <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+                ${data.navMain.map((item) => html`
+                  <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                    <a href=${item.url} title=${item.title} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item === active ? 'true' : 'false'} aria-current=${item === active ? 'page' : null} class=${cn(sidebarMenuButtonClass(), 'px-2.5 md:px-2')}>
+                      ${item.icon()}
+                      <span>${item.title}</span>
+                    </a>
+                  </li>
+                `)}
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div data-slot="sidebar-footer" data-sidebar="footer" class=${sidebarFooterClass()}>
+          ${navUser({ user: data.user })}
+        </div>
+      </ui-sidebar>
+
+      <ui-sidebar collapsible="none" class="hidden flex-1 md:flex">
+        <div data-slot="sidebar-header" data-sidebar="header" class=${cn(sidebarHeaderClass(), 'gap-3.5 border-b p-4')}>
+          <div class="flex w-full items-center justify-between">
+            <div class="text-base font-medium text-foreground">${active.title}</div>
+            <label class=${cn(labelClass(), 'flex items-center gap-2 text-sm')}>
+              <span>Unreads</span>
+              <ui-switch name="unreads" class="shadow-none"></ui-switch>
+            </label>
+          </div>
+          <input type="search" name="q" placeholder="Type to search..." aria-label="Search mail" data-slot="sidebar-input" data-sidebar="input" class=${sidebarInputClass()}>
+        </div>
+        <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+          <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'px-0')}>
+            <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+              ${data.mails.map((mail) => html`
+                <a href="#" class="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap text-inherit no-underline last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
+                  <div class="flex w-full items-center gap-2">
+                    <span>${mail.name}</span> <span class="ml-auto text-xs">${mail.date}</span>
+                  </div>
+                  <span class="font-medium">${mail.subject}</span>
+                  <span class="line-clamp-2 w-[260px] text-xs whitespace-break-spaces">${mail.teaser}</span>
+                </a>
+              `)}
+            </div>
+          </div>
+        </div>
+      </ui-sidebar>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-09/components/nav-user.ts

@@ -0,0 +1,70 @@
+/**
+ * The sidebar-09 user menu: the signed-in user's avatar, name and email,
+ * opening an account menu. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-09.
+ *
+ * The menu items are placeholders. Make "Log out" a form that posts to your
+ * sign-out action, and the others links to your account pages.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { avatarClass, avatarFallbackClass, avatarImageClass } from '../../../components/avatar.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from '../../../lib/icons.ts';
+
+function userAvatar(user: { name: string; avatar: string }) {
+  return html`<span data-slot="avatar" data-size="default" class=${cn(avatarClass(), 'h-8 w-8 rounded-lg')}>
+    <span data-slot="avatar-fallback" class=${cn(avatarFallbackClass(), 'rounded-lg')}>VK</span>
+    <img data-slot="avatar-image" src=${user.avatar} alt="@vivek" class=${avatarImageClass()}>
+  </span>`;
+}
+
+function userText(user: { name: string; email: string }) {
+  return html`<div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-medium">${user.name}</span>
+    <span class="truncate text-xs">${user.email}</span>
+  </div>`;
+}
+
+export function navUser({ user }: { user: { name: string; email: string; avatar: string } }) {
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <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="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground md:h-8 md:p-0')}>
+              ${userAvatar(user)}
+              ${userText(user)}
+              ${ChevronsUpDownIcon('ml-auto size-4')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg" side="right" align="end">
+            <ui-dropdown-menu-label class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                ${userAvatar(user)}
+                ${userText(user)}
+              </div>
+            </ui-dropdown-menu-label>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${SparklesIcon()}Upgrade to Pro</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${BadgeCheckIcon()}Account</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${CreditCardIcon()}Billing</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${BellIcon()}Notifications</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item>${LogOutIcon()}Log out</ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

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

@@ -0,0 +1,52 @@
+/**
+ * The sidebar-09 block's page: a mail layout with collapsible nested
+ * sidebars, beside a header with a breadcrumb and a placeholder message list.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-09` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-09.
+ */
+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: 'Inbox' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-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="#">All Inboxes</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">Inbox</span>
+              </li>
+            </ol>
+          </nav>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          ${Array.from({ length: 24 }, () => html`<div class="aspect-video h-12 w-full rounded-lg bg-muted/50"></div>`)}
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

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

@@ -0,0 +1,125 @@
+/**
+ * The sidebar-10 app sidebar: a notes app's team switcher and main links,
+ * the favourite pages, the workspaces with their pages, and a secondary nav
+ * pinned to the bottom. 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-10.
+ *
+ * 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,
+  sidebarHeaderClass,
+} from '../../../components/sidebar.ts';
+import { navFavorites, type Favorite } from './nav-favorites.ts';
+import { navMain, type NavMainItem } from './nav-main.ts';
+import { navSecondary, type NavSecondaryItem } from './nav-secondary.ts';
+import { navWorkspaces, type Workspace } from './nav-workspaces.ts';
+import { teamSwitcher, type Team } from './team-switcher.ts';
+import { AudioLinesIcon, BlocksIcon, CalendarIcon, CommandIcon, HomeIcon, InboxIcon, MessageCircleQuestionIcon, SearchIcon, Settings2Icon, SparklesIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+// This is sample data.
+const data: {
+  teams: Team[];
+  navMain: NavMainItem[];
+  navSecondary: NavSecondaryItem[];
+  favorites: Favorite[];
+  workspaces: Workspace[];
+} = {
+  teams: [
+    { name: 'Acme Inc', logo: CommandIcon, plan: 'Enterprise' },
+    { name: 'Acme Corp.', logo: AudioLinesIcon, plan: 'Startup' },
+    { name: 'Evil Corp.', logo: CommandIcon, plan: 'Free' },
+  ],
+  navMain: [
+    { title: 'Search', url: '#', icon: SearchIcon },
+    { title: 'Ask AI', url: '#', icon: SparklesIcon },
+    { title: 'Home', url: '#', icon: HomeIcon, isActive: true },
+    { title: 'Inbox', url: '#', icon: InboxIcon, badge: '10' },
+  ],
+  navSecondary: [
+    { title: 'Calendar', url: '#', icon: CalendarIcon },
+    { title: 'Settings', url: '#', icon: Settings2Icon },
+    { title: 'Templates', url: '#', icon: BlocksIcon },
+    { title: 'Trash', url: '#', icon: Trash2Icon },
+    { title: 'Help', url: '#', icon: MessageCircleQuestionIcon },
+  ],
+  favorites: [
+    { name: 'Project Management & Task Tracking', url: '#', emoji: '📊' },
+    { name: 'Family Recipe Collection & Meal Planning', url: '#', emoji: '🍳' },
+    { name: 'Fitness Tracker & Workout Routines', url: '#', emoji: '💪' },
+    { name: 'Book Notes & Reading List', url: '#', emoji: '📚' },
+    { name: 'Sustainable Gardening Tips & Plant Care', url: '#', emoji: '🌱' },
+    { name: 'Language Learning Progress & Resources', url: '#', emoji: '🗣️' },
+    { name: 'Home Renovation Ideas & Budget Tracker', url: '#', emoji: '🏠' },
+    { name: 'Personal Finance & Investment Portfolio', url: '#', emoji: '💰' },
+    { name: 'Movie & TV Show Watchlist with Reviews', url: '#', emoji: '🎬' },
+    { name: 'Daily Habit Tracker & Goal Setting', url: '#', emoji: '✅' },
+  ],
+  workspaces: [
+    {
+      name: 'Personal Life Management',
+      emoji: '🏠',
+      pages: [
+        { name: 'Daily Journal & Reflection', url: '#', emoji: '📔' },
+        { name: 'Health & Wellness Tracker', url: '#', emoji: '🍏' },
+        { name: 'Personal Growth & Learning Goals', url: '#', emoji: '🌟' },
+      ],
+    },
+    {
+      name: 'Professional Development',
+      emoji: '💼',
+      pages: [
+        { name: 'Career Objectives & Milestones', url: '#', emoji: '🎯' },
+        { name: 'Skill Acquisition & Training Log', url: '#', emoji: '🧠' },
+        { name: 'Networking Contacts & Events', url: '#', emoji: '🤝' },
+      ],
+    },
+    {
+      name: 'Creative Projects',
+      emoji: '🎨',
+      pages: [
+        { name: 'Writing Ideas & Story Outlines', url: '#', emoji: '✍️' },
+        { name: 'Art & Design Portfolio', url: '#', emoji: '🖼️' },
+        { name: 'Music Composition & Practice Log', url: '#', emoji: '🎵' },
+      ],
+    },
+    {
+      name: 'Home Management',
+      emoji: '🏡',
+      pages: [
+        { name: 'Household Budget & Expense Tracking', url: '#', emoji: '💰' },
+        { name: 'Home Maintenance Schedule & Tasks', url: '#', emoji: '🔧' },
+        { name: 'Family Calendar & Event Planning', url: '#', emoji: '📅' },
+      ],
+    },
+    {
+      name: 'Travel & Adventure',
+      emoji: '🧳',
+      pages: [
+        { name: 'Trip Planning & Itineraries', url: '#', emoji: '🗺️' },
+        { name: 'Travel Bucket List & Inspiration', url: '#', emoji: '🌎' },
+        { name: 'Travel Journal & Photo Gallery', url: '#', emoji: '📸' },
+      ],
+    },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar class="border-r-0">
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        ${teamSwitcher({ teams: data.teams })}
+        ${navMain({ items: data.navMain })}
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${navFavorites({ favorites: data.favorites })}
+        ${navWorkspaces({ workspaces: data.workspaces })}
+        ${navSecondary({ items: data.navSecondary, class: 'mt-auto' })}
+      </div>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}