{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sidebar-07", "title": "Toolbar Action Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sidebar-07/sidebar-07.component.ts", "content": "// App sidebar with a bottom action bar. Workspace pill + search at the top,\n// three grouped nav sections, user pill above an icon toolbar (Settings,\n// Help, Notifications, Command palette, theme toggle) anchored at the very\n// bottom. Every row is spelled out inline so you can edit in place.\n// Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core'\nimport {\n Bell,\n ChartBar,\n ChevronsUpDown,\n Command,\n CreditCard,\n FileText,\n HelpCircle,\n LineChart,\n LucideAngularModule,\n Mail,\n Moon,\n Package,\n Plus,\n Search,\n Settings as SettingsIcon,\n ShoppingCart,\n Sun,\n Users,\n} from 'lucide-angular'\nimport { injectTheme } from '@/lib/use-theme'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupActionComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarHeaderComponent,\n UiSidebarMenuBadgeComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarRailComponent,\n UiSidebarSeparatorComponent,\n UiSidebarTriggerComponent,\n injectSidebar,\n} from '@/ui/sidebar/sidebar.component'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sidebar-07, [ui-sidebar-07]',\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 UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupActionComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarHeaderComponent,\n UiInputComponent,\n UiSidebarMenuBadgeComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarRailComponent,\n UiSidebarSeparatorComponent,\n UiSidebarTriggerComponent,\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 ⌘K\n \n \n
\n \n\n \n \n Dashboard\n \n
    \n
  • \n \n \n \n Analytics\n \n
    • \n
  • \n \n
    • \n
\n \n \n\n \n Management\n \n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n \n \n\n \n Content\n \n \n
    \n
  • \n \n 10\n
    • \n
  • \n \n
    • \n
\n \n \n \n\n \n
    \n
  • \n \n
    • \n
\n\n @if (sidebar.state === 'expanded') {\n \n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @if (isDark()) {\n \n } @else {\n \n }\n \n \n
\n } @else {\n \n
\n \n
\n }\n \n\n \n \n `,\n})\nexport class UiSidebar07Component {\n protected readonly Bell = Bell\n protected readonly ChartBar = ChartBar\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly Command = Command\n protected readonly CreditCard = CreditCard\n protected readonly FileText = FileText\n protected readonly HelpCircle = HelpCircle\n protected readonly LineChart = LineChart\n protected readonly Mail = Mail\n protected readonly Moon = Moon\n protected readonly Package = Package\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly SettingsIcon = SettingsIcon\n protected readonly ShoppingCart = ShoppingCart\n protected readonly Sun = Sun\n protected readonly Users = Users\n\n protected readonly sidebar = injectSidebar()\n private readonly theme = injectTheme()\n private readonly mounted = signal(false)\n\n readonly isDark = computed(() => {\n if (!this.mounted()) return false\n if (typeof window === 'undefined') return this.theme.resolvedTheme() === 'dark'\n const t = this.theme.theme()\n return t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)\n })\n\n constructor() {\n // Flip after first render so SSR + first client paint agree on the Sun/Moon icon.\n queueMicrotask(() => this.mounted.set(true))\n }\n\n toggleTheme(): void {\n this.theme.setTheme(this.isDark() ? 'light' : 'dark')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-07/sidebar-07.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-07/index.ts", "content": "export { UiSidebar07Component } from './sidebar-07.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-07/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/use-theme.json" ], "description": "App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.", "categories": [ "layout", "sidebar" ] }