{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sidebar-02", "title": "Team Switcher Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sidebar-02/sidebar-02.component.ts", "content": "import { Component, ChangeDetectionStrategy } from '@angular/core'\nimport {\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarHeaderComponent,\n UiSidebarRailComponent,\n} from '@/ui/sidebar/sidebar.component'\nimport {\n BookOpen,\n Bot,\n Frame,\n LifeBuoy,\n Map as MapIcon,\n PieChart,\n Send,\n Settings2,\n SquareTerminal,\n} from 'lucide-angular'\nimport { NavMainComponent } from './nav-main.component'\nimport { NavProjectsComponent } from './nav-projects.component'\nimport { NavSecondaryComponent } from './nav-secondary.component'\nimport { NavUserComponent } from './nav-user.component'\nimport { TeamSwitcherComponent } from './team-switcher.component'\nimport type { SidebarNavItem, SidebarProject, SidebarUser } from './sidebar-02.models'\n\nconst data: {\n user: SidebarUser\n navMain: SidebarNavItem[]\n navSecondary: SidebarNavItem[]\n projects: SidebarProject[]\n} = {\n user: {\n name: 'shadcn',\n email: 'm@example.com',\n },\n navMain: [\n {\n title: 'Playground',\n url: '#',\n icon: SquareTerminal,\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 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 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 items: [\n { title: 'General', url: '#' },\n { title: 'Team', url: '#' },\n { title: 'Billing', url: '#' },\n { title: 'Limits', url: '#' },\n ],\n },\n ],\n navSecondary: [\n { title: 'Support', url: '#', icon: LifeBuoy },\n { title: 'Feedback', url: '#', icon: Send },\n ],\n projects: [\n { name: 'Design Engineering', url: '#', icon: Frame },\n { name: 'Sales & Marketing', url: '#', icon: PieChart },\n { name: 'Travel', url: '#', icon: MapIcon },\n ],\n}\n\n/**\n * Sidebar02 -- the React block, 1:1: a `collapsible=\"icon\"` Sidebar with TeamSwitcher\n * header, primary nav, projects, secondary links and a user dropdown footer. It reads\n * the surrounding (pair with +\n * ), so the trigger, the rail and Cmd/Ctrl+B all collapse it.\n * Edit `data` to change routes; each section is a sibling file.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sidebar-02, [ui-sidebar-02]',\n standalone: true,\n // React renders itself: keep this wrapper out of the provider's flex layout.\n host: { class: 'contents' },\n imports: [\n UiSidebarComponent,\n UiSidebarHeaderComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarRailComponent,\n TeamSwitcherComponent,\n NavMainComponent,\n NavProjectsComponent,\n NavSecondaryComponent,\n NavUserComponent,\n ],\n template: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n})\nexport class UiSidebar02Component {\n readonly data = data\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/sidebar-02.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-02/sidebar-02.models.ts", "content": "import type { LucideIconData } from 'lucide-angular'\n\nexport interface SidebarSubItem {\n title: string\n url: string\n isActive?: boolean\n}\n\nexport interface SidebarNavItem {\n title: string\n url: string\n icon: LucideIconData\n isActive?: boolean\n items?: SidebarSubItem[]\n}\n\nexport interface SidebarProject {\n name: string\n url: string\n icon: LucideIconData\n}\n\n/** `logo: 'uipkge'` renders the 4-quadrant uipkge mark (inline SVG), like the React block. */\nexport interface SidebarTeam {\n name: string\n plan: string\n logo: LucideIconData | 'uipkge'\n}\n\nexport interface SidebarUser {\n name: string\n email: string\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/sidebar-02.models.ts" }, { "path": "packages/registry-angular/blocks/sidebar-02/team-switcher.component.ts", "content": "// Edit teams + activeTeam below to match your tenant model. The dropdown\n// is the full team switcher pattern -- avatar tile, label, kbd shortcut,\n// and a \"Add team\" footer row. Wire the select handler to your tenant API.\n\nimport { Component, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { AudioWaveform, Check, ChevronsUpDown, Command, LucideAngularModule, Plus } from 'lucide-angular'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuShortcutComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport {\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n injectSidebar,\n} from '@/ui/sidebar/sidebar.component'\nimport type { SidebarTeam } from './sidebar-02.models'\n\nconst teams: SidebarTeam[] = [\n { name: 'uipkge', logo: 'uipkge', plan: 'UI registry' },\n { name: 'uipkge HRMS', logo: AudioWaveform, plan: 'Vertical' },\n { name: 'uipkge Hospital', logo: Command, plan: 'Vertical' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'team-switcher',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuTriggerComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuShortcutComponent,\n ],\n template: `\n
    \n
  • \n \n \n \n @if (activeTeam().logo === 'uipkge') {\n \n \n \n \n \n \n \n } @else {\n \n }\n \n
    \n {{ activeTeam().name }}\n {{ activeTeam().plan }}\n
    \n \n \n \n Teams\n @for (team of teams; track team.name; let i = $index) {\n \n
    \n @if (team.logo === 'uipkge') {\n \n \n \n \n \n \n \n } @else {\n \n }\n
    \n {{ team.name }}\n @if (activeTeam() === team) {\n \n } @else {\n ⌘{{ i + 1 }}\n }\n     \n }\n \n \n
    \n \n
    \n
    Add team
    \n     \n \n     \n
    • \n
\n `,\n})\nexport class TeamSwitcherComponent {\n readonly sidebar = injectSidebar()\n readonly teams = teams\n readonly activeTeam = signal(teams[0]!)\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly Check = Check\n protected readonly Plus = Plus\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/team-switcher.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-02/nav-main.component.ts", "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { ChevronRight, LucideAngularModule } from 'lucide-angular'\nimport {\n UiCollapsibleComponent,\n UiCollapsibleContentComponent,\n UiCollapsibleTriggerComponent,\n} from '@/ui/collapsible/collapsible.component'\nimport {\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarMenuActionComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuSubButtonComponent,\n UiSidebarMenuSubComponent,\n UiSidebarMenuSubItemComponent,\n} from '@/ui/sidebar/sidebar.component'\nimport type { SidebarNavItem } from './sidebar-02.models'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'nav-main',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiCollapsibleComponent,\n UiCollapsibleTriggerComponent,\n UiCollapsibleContentComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuActionComponent,\n UiSidebarMenuSubComponent,\n UiSidebarMenuSubItemComponent,\n UiSidebarMenuSubButtonComponent,\n ],\n template: `\n \n Platform\n \n \n `,\n})\nexport class NavMainComponent {\n @Input() items: SidebarNavItem[] = []\n protected readonly ChevronRight = ChevronRight\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/nav-main.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-02/nav-projects.component.ts", "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { Folder, Forward, LucideAngularModule, MoreHorizontal, Trash2 } from 'lucide-angular'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport {\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarMenuActionComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n injectSidebar,\n} from '@/ui/sidebar/sidebar.component'\nimport type { SidebarProject } from './sidebar-02.models'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'nav-projects',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiDropdownMenuComponent,\n UiDropdownMenuTriggerComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuActionComponent,\n ],\n template: `\n \n \n Projects\n
    \n @for (item of projects; track item.name) {\n
  • \n \n \n {{ item.name }}\n \n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n
    • \n }\n
  • \n \n
    • \n
\n \n `,\n})\nexport class NavProjectsComponent {\n readonly sidebar = injectSidebar()\n @Input() projects: SidebarProject[] = []\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Folder = Folder\n protected readonly Forward = Forward\n protected readonly Trash2 = Trash2\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/nav-projects.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-02/nav-secondary.component.ts", "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { LucideAngularModule } from 'lucide-angular'\nimport {\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n} from '@/ui/sidebar/sidebar.component'\nimport type { SidebarNavItem } from './sidebar-02.models'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'nav-secondary',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n ],\n template: `\n \n \n \n \n \n `,\n})\nexport class NavSecondaryComponent {\n @Input() items: SidebarNavItem[] = []\n /** Forwarded to the SidebarGroup, like React's `{...props}` (e.g. class=\"mt-auto\"). */\n @Input('class') className?: string\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/nav-secondary.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-02/nav-user.component.ts", "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n LucideAngularModule,\n Monitor,\n Moon,\n Palette,\n Sun,\n Zap,\n} from 'lucide-angular'\nimport { injectTheme, type Theme } from '@/lib/use-theme'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuGroupComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuRadioGroupComponent,\n UiDropdownMenuRadioItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuSubComponent,\n UiDropdownMenuSubContentComponent,\n UiDropdownMenuSubTriggerComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport {\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n injectSidebar,\n} from '@/ui/sidebar/sidebar.component'\nimport type { SidebarUser } from './sidebar-02.models'\n\nexport type SidebarTheme = Theme\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'nav-user',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuTriggerComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuGroupComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuRadioGroupComponent,\n UiDropdownMenuRadioItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuSubComponent,\n UiDropdownMenuSubTriggerComponent,\n UiDropdownMenuSubContentComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n ],\n template: `\n
    \n
  • \n \n \n \n {{ initials }}\n \n
    \n {{ user.name }}\n {{ user.email }}\n
    \n \n \n \n \n
    \n \n {{ initials }}\n \n
    \n {{ user.name }}\n {{ user.email }}\n
    \n
    \n     \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n \n Theme\n {{ theme.theme() }}\n \n \n \n \n Light\n \n \n Dark\n \n \n System\n \n \n \n \n \n \n \n Log out\n \n \n     \n
    • \n
\n `,\n})\nexport class NavUserComponent {\n readonly sidebar = injectSidebar()\n readonly theme = injectTheme()\n @Input() user: SidebarUser = { name: '', email: '' }\n\n get initials(): string {\n const parts = this.user.name.trim().split(/\\s+/).slice(0, 2)\n return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'\n }\n\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly Zap = Zap\n protected readonly BadgeCheck = BadgeCheck\n protected readonly CreditCard = CreditCard\n protected readonly Bell = Bell\n protected readonly Palette = Palette\n protected readonly Sun = Sun\n protected readonly Moon = Moon\n protected readonly Monitor = Monitor\n protected readonly LogOut = LogOut\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/nav-user.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-02/index.ts", "content": "export { UiSidebar02Component } from './sidebar-02.component'\nexport { TeamSwitcherComponent } from './team-switcher.component'\nexport { NavMainComponent } from './nav-main.component'\nexport { NavProjectsComponent } from './nav-projects.component'\nexport { NavSecondaryComponent } from './nav-secondary.component'\nexport { NavUserComponent, type SidebarTheme } from './nav-user.component'\nexport type { SidebarNavItem, SidebarSubItem, SidebarProject, SidebarTeam, SidebarUser } from './sidebar-02.models'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-02/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/sidebar.json", "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/collapsible.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/use-theme.json" ], "description": "Full-featured app sidebar — collapsible=\"icon\" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer with theme switching. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.", "categories": [ "layout", "sidebar" ] }