{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sidebar-06", "title": "Starred Project Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sidebar-06/sidebar-06.component.ts", "content": "// Colorful, customised HRMS-style sidebar -- branded project tiles, badges, status dots,\n// and a user pill footer. Every row is spelled out inline so you can swap colors and\n// labels in place. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component } from '@angular/core'\nimport {\n Briefcase,\n Calendar,\n ChartLine,\n ChevronsUpDown,\n ClipboardList,\n Folder,\n GraduationCap,\n HeartPulse,\n HelpCircle,\n Inbox,\n LayoutDashboard,\n LucideAngularModule,\n Monitor,\n Moon,\n Palette,\n Search,\n Send,\n Settings as SettingsIcon,\n Star,\n Sun,\n Users,\n} from 'lucide-angular'\nimport { injectTheme } from '@/lib/use-theme'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\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 { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarHeaderComponent,\n UiSidebarMenuBadgeComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarRailComponent,\n UiSidebarSeparatorComponent,\n injectSidebar,\n} from '@/ui/sidebar/sidebar.component'\n\n/**\n * Sidebar06 -- the React block, 1:1: a `collapsible=\"icon\"` Sidebar with a brand +\n * search header, workspace / workforce / starred-project / team / admin groups, and a\n * user pill footer with a theme radio submenu. It reads the surrounding\n * (pair with + ).\n * Edit the rows below to change routes; wire the user to your auth session.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sidebar-06, [ui-sidebar-06]',\n standalone: true,\n // React renders itself: keep this wrapper out of the provider's flex layout.\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuTriggerComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuRadioGroupComponent,\n UiDropdownMenuRadioItemComponent,\n UiDropdownMenuSubComponent,\n UiDropdownMenuSubTriggerComponent,\n UiDropdownMenuSubContentComponent,\n UiInputComponent,\n UiSidebarComponent,\n UiSidebarHeaderComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarGroupContentComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuBadgeComponent,\n UiSidebarSeparatorComponent,\n UiSidebarRailComponent,\n ],\n template: `\n \n \n
    \n
  • \n \n \n \n \n \n \n \n \n \n
    \n uipkge\n uipkge.dev\n
    \n \n
    • \n
\n\n
\n \n \n \n \n \n \n ⌘F\n \n \n
\n \n\n \n \n \n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n \n \n\n \n\n \n Workforce\n \n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n 6\n
    • \n
  • \n \n
    • \n
\n \n \n\n \n\n \n Projects\n \n
    \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
\n \n \n\n \n\n \n My team\n \n
    \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
\n \n \n\n \n\n \n Administration\n \n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
\n \n \n \n\n \n
    \n
  • \n \n \n \n \n JC\n \n \n \n \n James Carter\n Admin\n \n \n \n \n James Carter\n \n \n Invite teammates\n \n \n Workspace settings\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
\n \n\n \n \n `,\n})\nexport class UiSidebar06Component {\n readonly sidebar = injectSidebar()\n readonly theme = injectTheme()\n\n protected readonly Briefcase = Briefcase\n protected readonly Calendar = Calendar\n protected readonly ChartLine = ChartLine\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly ClipboardList = ClipboardList\n protected readonly Folder = Folder\n protected readonly GraduationCap = GraduationCap\n protected readonly HeartPulse = HeartPulse\n protected readonly HelpCircle = HelpCircle\n protected readonly Inbox = Inbox\n protected readonly LayoutDashboard = LayoutDashboard\n protected readonly Monitor = Monitor\n protected readonly Moon = Moon\n protected readonly Palette = Palette\n protected readonly Search = Search\n protected readonly Send = Send\n protected readonly SettingsIcon = SettingsIcon\n protected readonly Star = Star\n protected readonly Sun = Sun\n protected readonly Users = Users\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-06/sidebar-06.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-06/index.ts", "content": "export { UiSidebar06Component } from './sidebar-06.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-06/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/dropdown-menu.json", "https://uipkge.dev/r/angular/use-theme.json" ], "description": "Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.", "categories": [ "layout", "sidebar" ] }