{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sidebar-05", "title": "Dual-Rail Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sidebar-05/sidebar-05.component.ts", "content": "// Dual-rail sidebar with master/detail behavior. The thin rail picks the section; the\n// main panel renders the rows for the active section. One \n// contains rail + panel as inline flex siblings.\n//\n// Desktop: when collapsed (trigger clicked), the kit shrinks the sidebar to\n// --sidebar-width-icon. Set that to 3.5rem so only the rail stays. The panel is hidden\n// via group-data-[collapsible=icon] which only fires on the desktop branch of \n// (the mobile sheet has no `group` ancestor with that attr, so mobile always shows rail+panel).\n//\n// IMPORTANT: the parent must set BOTH custom widths, e.g.\n// \n// The vars set on itself are too deep -- the layout-allocating wrapper sits\n// above it and reads the provider's vars.\n//\n// To wire to your router, replace the signal-based switch with route matches\n// (e.g. set active = 'projects' on /projects/*).\n//\n// Port of the React block 1:1.\nimport { AfterViewInit, ChangeDetectionStrategy, Component, signal } from '@angular/core'\nimport {\n Bell,\n Briefcase,\n Calendar,\n ChartLine,\n ChevronsUpDown,\n ClipboardList,\n CreditCard,\n FileText,\n Folder,\n Gauge,\n Headphones,\n HelpCircle,\n Home,\n Inbox,\n LayoutDashboard,\n Lock,\n LucideAngularModule,\n Mail,\n MessageSquare,\n Moon,\n Search,\n Send,\n Settings as SettingsIcon,\n Star,\n Sun,\n Users,\n type LucideIconData,\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 UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarHeaderComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n injectSidebar,\n} from '@/ui/sidebar/sidebar.component'\n\ntype RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings'\n\ninterface RailItem {\n id: RailId\n icon: LucideIconData\n label: string\n}\n\nconst rail: RailItem[] = [\n { id: 'home', icon: Home, label: 'Home' },\n { id: 'projects', icon: Folder, label: 'Projects' },\n { id: 'inbox', icon: Bell, label: 'Inbox' },\n { id: 'messages', icon: MessageSquare, label: 'Messages' },\n]\nconst railLower: RailItem[] = [\n { id: 'support', icon: Headphones, label: 'Support' },\n { id: 'settings', icon: SettingsIcon, label: 'Settings' },\n]\n\nconst titles: Record = {\n home: 'Workspace',\n projects: 'Projects',\n inbox: 'Inbox',\n messages: 'Messages',\n support: 'Support',\n settings: 'Settings',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sidebar-05, [ui-sidebar-05]',\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 UiInputComponent,\n UiSidebarComponent,\n UiSidebarHeaderComponent,\n UiSidebarContentComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarGroupContentComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n ],\n template: `\n \n \n
\n \n \n\n \n
\n \n
    \n
  • \n
\n
\n uipkge\n {{ titles[active()] }}\n
\n \n \n \n \n\n
\n \n \n \n \n \n \n ⌘F\n \n \n
\n \n\n \n \n @if (active() === 'home') {\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
    • \n
  • \n \n
    • \n
\n \n \n } @else if (active() === 'projects') {\n \n \n Pinned\n \n
    \n
  • \n
\n Shift Planner\n \n \n \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n \n \n \n\n \n Recent\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n } @else if (active() === 'inbox') {\n \n \n Today\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n\n \n This week\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n } @else if (active() === 'messages') {\n \n \n Direct messages\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n\n \n Channels\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n } @else if (active() === 'support') {\n \n \n Help center\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n } @else if (active() === 'settings') {\n \n \n Workspace\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n\n \n Account\n \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n     \n     \n }\n \n \n \n     \n `,\n})\nexport class UiSidebar05Component implements AfterViewInit {\n readonly sidebar = injectSidebar()\n readonly theme = injectTheme()\n\n readonly rail = rail\n readonly railLower = railLower\n readonly titles = titles\n readonly active = signal('home')\n\n // `mounted` stays false during SSR + the client's first synchronous render, so the\n // template's isDark is also false on both sides -- no hydration mismatch on the\n // Sun/Moon icon. ngAfterViewInit only runs after a real browser render (never in plain\n // instantiation), like Vue's onMounted / React's useEffect.\n private readonly mounted = signal(false)\n\n ngAfterViewInit(): void {\n this.mounted.set(true)\n }\n\n protected readonly Search = Search\n protected readonly Sun = Sun\n protected readonly Moon = Moon\n protected readonly Send = Send\n protected readonly SettingsIcon = SettingsIcon\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly LayoutDashboard = LayoutDashboard\n protected readonly Users = Users\n protected readonly Briefcase = Briefcase\n protected readonly Folder = Folder\n protected readonly Calendar = Calendar\n protected readonly ClipboardList = ClipboardList\n protected readonly Mail = Mail\n protected readonly ChartLine = ChartLine\n protected readonly Inbox = Inbox\n protected readonly Bell = Bell\n protected readonly FileText = FileText\n protected readonly MessageSquare = MessageSquare\n protected readonly HelpCircle = HelpCircle\n protected readonly CreditCard = CreditCard\n protected readonly Gauge = Gauge\n protected readonly Lock = Lock\n protected readonly Star = Star\n\n get isDark(): boolean {\n // Template icon: stays Moon until the browser render settles (mounted guard).\n if (!this.mounted()) return false\n return this.resolvedDark()\n }\n\n private resolvedDark(): boolean {\n const t = this.theme.theme()\n if (t === 'dark') return true\n if (t === 'light') return false\n return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-color-scheme: dark)').matches\n }\n\n railButtonClass(id: RailId): string {\n const base = 'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors'\n return this.active() === id\n ? `${base} bg-sidebar-accent text-foreground`\n : `${base} text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground`\n }\n\n // Slack-style rail click: expand the panel if collapsed, or collapse if the user clicks\n // the already-active icon while expanded. On mobile the sheet open/close is owned by the\n // inset trigger, so just swap active.\n selectRail(id: RailId): void {\n if (this.sidebar.isMobile) {\n this.active.set(id)\n return\n }\n if (this.sidebar.state === 'expanded' && this.active() === id) {\n this.sidebar.setOpen(false)\n return\n }\n this.active.set(id)\n this.sidebar.setOpen(true)\n }\n\n toggleTheme(): void {\n this.theme.setTheme(this.resolvedDark() ? 'light' : 'dark')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-05/sidebar-05.component.ts" }, { "path": "packages/registry-angular/blocks/sidebar-05/index.ts", "content": "export { UiSidebar05Component } from './sidebar-05.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sidebar-05/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": "Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible=\"icon\": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: style=\"--sidebar-width: 19.5rem; --sidebar-width-icon: 3.5rem\". Modeled on the GR8R HRMS admin shell.", "categories": [ "layout", "sidebar" ] }