{
"$schema": "https://uipkge.dev/schema/registry-item.json",
"name": "sidebar-02",
"title": "Team Switcher Sidebar",
"type": "registry:block",
"description": "Full-featured app sidebar -- collapsible=\"icon\" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.",
"categories": [
"layout",
"sidebar"
],
"files": [
{
"path": "packages/elements-lit/src/blocks/sidebar-02/sidebar-02.ts",
"content": "import { LitElement, css, html } from 'lit'\nimport {\n AudioWaveform,\n BadgeCheck,\n Bell,\n BookOpen,\n Bot,\n Check,\n ChevronRight,\n ChevronsUpDown,\n Command,\n CreditCard,\n Folder,\n Forward,\n Frame,\n LifeBuoy,\n LogOut,\n Map,\n Monitor,\n Moon,\n MoreHorizontal,\n Palette,\n PieChart,\n Plus,\n Send,\n Settings2,\n SquareTerminal,\n Sun,\n Trash2,\n Zap,\n type IconNode,\n} from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/collapsible/collapsible'\nimport '../../components/dropdown-menu/dropdown-menu'\nimport '../../components/sidebar/sidebar'\n\ntype ThemeValue = 'light' | 'dark' | 'system'\n\nfunction getTheme(): ThemeValue {\n try {\n const stored = localStorage.getItem('uipkge-theme')\n if (stored === 'light' || stored === 'dark' || stored === 'system') return stored\n } catch {\n // ignore\n }\n return document.documentElement.classList.contains('dark') ? 'dark' : 'light'\n}\n\nfunction setTheme(value: ThemeValue) {\n try {\n localStorage.setItem('uipkge-theme', value)\n } catch {\n // ignore\n }\n const dark = value === 'dark' || (value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)\n document.documentElement.classList.toggle('dark', dark)\n}\n\nfunction brandMark(classes: string) {\n return html``\n}\n\ninterface Team {\n name: string\n logo: IconNode | 'mark'\n plan: string\n}\n\nconst teams: Team[] = [\n { name: 'uipkge', logo: 'mark', plan: 'UI registry' },\n { name: 'uipkge HRMS', logo: AudioWaveform, plan: 'Vertical' },\n { name: 'uipkge Hospital', logo: Command, plan: 'Vertical' },\n]\n\ninterface NavSubItem {\n title: string\n url: string\n isActive?: boolean\n}\n\ninterface NavMainItem {\n title: string\n url: string\n icon: IconNode\n iconName: string\n isActive?: boolean\n items?: NavSubItem[]\n}\n\n// Sample data (React's `data`, inlined so consumers edit routes in place).\nconst navMain: NavMainItem[] = [\n {\n title: 'Playground',\n url: '#',\n icon: SquareTerminal,\n iconName: 'square-terminal',\n isActive: true,\n items: [\n { title: 'History', url: '#' },\n { title: 'Starred', url: '#' },\n { title: 'Settings', url: '#' },\n ],\n },\n {\n title: 'Models',\n url: '#',\n icon: Bot,\n iconName: 'bot',\n items: [\n { title: 'Genesis', url: '#' },\n { title: 'Explorer', url: '#' },\n { title: 'Quantum', url: '#' },\n ],\n },\n {\n title: 'Documentation',\n url: '#',\n icon: BookOpen,\n iconName: 'book-open',\n items: [\n { title: 'Introduction', url: '#' },\n { title: 'Get Started', url: '#' },\n { title: 'Tutorials', url: '#' },\n { title: 'Changelog', url: '#' },\n ],\n },\n {\n title: 'Settings',\n url: '#',\n icon: Settings2,\n iconName: 'settings-2',\n items: [\n { title: 'General', url: '#' },\n { title: 'Team', url: '#' },\n { title: 'Billing', url: '#' },\n { title: 'Limits', url: '#' },\n ],\n },\n]\n\nconst navSecondary: { title: string; url: string; icon: IconNode; iconName: string; isActive?: boolean }[] = [\n { title: 'Support', url: '#', icon: LifeBuoy, iconName: 'life-buoy' },\n { title: 'Feedback', url: '#', icon: Send, iconName: 'send' },\n]\n\nconst projects = [\n { name: 'Design Engineering', url: '#', icon: Frame, iconName: 'frame' },\n { name: 'Sales & Marketing', url: '#', icon: PieChart, iconName: 'chart-pie' },\n { name: 'Travel', url: '#', icon: Map, iconName: 'map' },\n]\n\nconst user = { name: 'shadcn', email: 'm@example.com' }\n\n/**\n * — the registry Sidebar02 block as a web component\n * (TeamSwitcher + NavMain + NavProjects + NavSecondary + NavUser inlined —\n * one block, one install unit).\n *\n * Class strings are React's verbatim. Sample data is inlined so consumers\n * edit routes in place; edit teams + activeTeam below to match your tenant\n * model. The theme submenu writes the `dark` class on documentElement\n * directly (the `next-themes` dependency is not ported — same visual result,\n * persisted to localStorage). No props, no events.\n */\nexport class UipSidebar02 extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n activeTeam: { state: true },\n theme: { state: true },\n }\n\n private activeTeam: Team = teams[0]!\n private theme: ThemeValue = 'light'\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'sidebar-02')\n this.theme = getTheme()\n }\n\n private get initials() {\n const parts = user.name.trim().split(/\\s+/).slice(0, 2)\n return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'\n }\n\n render() {\n const ActiveLogo = this.activeTeam.logo\n return html`\n \n \n \n \n \n \n \n \n \n\n \n \n Platform\n \n ${navMain.map(\n (item) => html`\n \n \n \n ${icon(item.icon, item.iconName)} ${item.title}\n \n ${item.items?.length\n ? html`\n \n \n ${icon(ChevronRight, 'chevron-right')}\n Toggle\n \n \n \n \n ${item.items.map(\n (subItem) => html`\n \n \n ${subItem.title}\n \n \n `,\n )}\n \n \n `\n : ''}\n \n \n `,\n )}\n \n \n\n \n Projects\n \n ${projects.map(\n (item) => html`\n \n \n ${icon(item.icon, item.iconName)} ${item.name}\n \n \n \n ${icon(MoreHorizontal, 'ellipsis')} More\n \n \n \n ${icon(Folder, 'folder', 'text-muted-foreground')} View Project\n \n \n ${icon(Forward, 'forward', 'text-muted-foreground')} Share Project\n \n \n \n ${icon(Trash2, 'trash-2', 'text-muted-foreground')} Delete Project\n \n \n \n \n `,\n )}\n \n \n ${icon(MoreHorizontal, 'ellipsis')} More\n \n \n \n \n\n \n \n \n ${navSecondary.map(\n (item) => html`\n \n \n ${icon(item.icon, item.iconName)} ${item.title}\n \n \n `,\n )}\n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n `\n }\n}\n\ncustomElements.get('uip-sidebar-02') || customElements.define('uip-sidebar-02', UipSidebar02)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-sidebar-02': UipSidebar02\n }\n}\n",
"type": "registry:file",
"target": "src/uip/blocks/sidebar-02/sidebar-02.ts"
}
],
"dependencies": [
"lit",
"lucide"
],
"registryDependencies": [
"https://uipkge.dev/r/lit/avatar.json",
"https://uipkge.dev/r/lit/collapsible.json",
"https://uipkge.dev/r/lit/dropdown-menu.json",
"https://uipkge.dev/r/lit/lit-core.json",
"https://uipkge.dev/r/lit/sidebar.json"
]
}