{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sidebar-01", "title": "Icon Rail Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sidebar-01/sidebar-01.component.ts", "content": "// Edit this file to change brand, navigation, and the user dropdown.\n// Every menu item is spelled out below -- copy, remove, or rename rows directly.\nimport { Component, ChangeDetectionStrategy } from '@angular/core'\nimport {\n BarChart3,\n BookOpen,\n FileText,\n Files,\n History,\n LayoutDashboard,\n LucideAngularModule,\n Table as TableIcon,\n} from 'lucide-angular'\nimport {\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarHeaderComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarRailComponent,\n} from '@/ui/sidebar/sidebar.component'\nimport { Sidebar01NavUserComponent } from './nav-user-01.component'\n\n/**\n * Sidebar01 -- the React block, 1:1: a `collapsible=\"icon\"` Sidebar with a brand\n * row, Workspace + Resources groups and a user dropdown footer. It reads the\n * surrounding , so , the rail and\n * Cmd/Ctrl+B collapse it to the icon rail (labels become tooltips).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sidebar-01, [ui-sidebar-01]',\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 UiSidebarComponent,\n UiSidebarHeaderComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarGroupContentComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarRailComponent,\n Sidebar01NavUserComponent,\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 Workspace\n \n
    \n
  • \n \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n \n \n \n Resources\n \n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
\n \n \n \n \n \n \n \n \n `,\n})\nexport class UiSidebar01Component {\n protected readonly LayoutDashboard = LayoutDashboard\n protected readonly TableIcon = TableIcon\n protected readonly FileText = FileText\n protected readonly BarChart3 = BarChart3\n protected readonly Files = Files\n protected readonly BookOpen = BookOpen\n protected readonly History = History\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-01/sidebar-01.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-01/nav-user-01.component.ts", "content": "// Edit this file to change the user dropdown content, avatar, and logout handler.\n// The user details are inlined below -- wire them to your auth session in place.\nimport { Component, ChangeDetectionStrategy } from '@angular/core'\nimport {\n BadgeCheck,\n ChevronsUpDown,\n LogOut,\n LucideAngularModule,\n Monitor,\n Moon,\n Palette,\n Settings,\n Sun,\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'\n\nexport type Sidebar01Theme = Theme\n\n// Replace these with your auth session.\nconst user = {\n name: 'Test User',\n email: 'you@example.com',\n initials: 'TU',\n}\n\nfunction handleLogout(): void {\n // TODO: call your /api/auth/logout endpoint, then redirect.\n console.warn('NavUser: wire handleLogout() to your auth backend')\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'sidebar-01-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 {{ user.initials }}\n \n
    \n {{ user.name }}\n {{ user.email }}\n
    \n \n \n \n \n
    \n \n {{ user.initials }}\n \n
    \n {{ user.name }}\n {{ user.email }}\n
    \n
    \n     \n \n \n Profile\n Settings\n \n \n \n \n \n Theme\n {{ theme.theme() }}\n \n \n \n Light\n Dark\n System\n \n \n \n \n \n \n Log out\n \n \n     \n
    • \n
\n `,\n})\nexport class Sidebar01NavUserComponent {\n readonly sidebar = injectSidebar()\n readonly theme = injectTheme()\n readonly user = user\n\n logout(): void {\n handleLogout()\n }\n\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly BadgeCheck = BadgeCheck\n protected readonly Settings = Settings\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-01/nav-user-01.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-01/index.ts", "content": "export { UiSidebar01Component } from './sidebar-01.component'\nexport { Sidebar01NavUserComponent, type Sidebar01Theme } from './nav-user-01.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-01/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": "Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer with theme switching. Pure template, no props — edit the files to change routes and wire your auth session.", "categories": [ "layout", "sidebar" ] }