{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "sales-sidebar", "title": "Sales Sidebar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/sales-sidebar/sales-sidebar.component.ts", "content": "import { Component, EventEmitter, Input, Output, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarHeaderComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuSubButtonComponent,\n UiSidebarMenuSubComponent,\n UiSidebarMenuSubItemComponent,\n UiSidebarRailComponent,\n injectSidebar,\n} from '@/ui/sidebar/sidebar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport {\n UiCollapsibleComponent,\n UiCollapsibleContentComponent,\n UiCollapsibleTriggerComponent,\n} from '@/ui/collapsible/collapsible.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport {\n LucideAngularModule,\n LayoutDashboard,\n ShoppingCart,\n Users,\n Package,\n TrendingUp,\n Settings,\n LifeBuoy,\n Store,\n Plus,\n Check,\n ChevronsUpDown,\n ChevronRight,\n LogOut,\n type LucideIconData,\n} from 'lucide-angular'\n\nexport interface SalesNavChild {\n title: string\n}\n\nexport interface SalesNavItem {\n title: string\n icon: LucideIconData\n badge?: string\n children?: SalesNavChild[]\n}\n\nexport interface SalesTeam {\n name: string\n plan: string\n initials: string\n}\n\nconst NAV_MAIN: SalesNavItem[] = [\n { title: 'Dashboard', icon: LayoutDashboard },\n {\n title: 'Orders',\n icon: ShoppingCart,\n badge: '12',\n children: [{ title: 'All orders' }, { title: 'Pending' }, { title: 'Returns' }],\n },\n { title: 'Customers', icon: Users },\n {\n title: 'Products',\n icon: Package,\n children: [{ title: 'Catalog' }, { title: 'Inventory' }, { title: 'Categories' }],\n },\n { title: 'Analytics', icon: TrendingUp },\n { title: 'Settings', icon: Settings },\n]\n\nconst NAV_SECONDARY: SalesNavItem[] = [{ title: 'Support', icon: LifeBuoy }]\n\nconst STORES: SalesNavItem[] = [\n { title: 'Flagship store', icon: Store },\n { title: 'Outlet store', icon: Store },\n]\n\nconst TEAMS: SalesTeam[] = [\n { name: 'Acme Inc', plan: 'Flagship store', initials: 'AC' },\n { name: 'Globex', plan: 'Outlet store', initials: 'GX' },\n]\n\n/**\n * Sales-sidebar navigation: team switcher, collapsible platform groups (one open at a\n * time), store list, secondary links and a user menu. Composed from the sidebar,\n * collapsible, dropdown-menu and badge primitives; renders inside , so it\n * gets the icon rail, tooltips and the mobile sheet from the primitive. Selection is\n * owned by the parent via [(active)].\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sales-sidebar-nav, [ui-sales-sidebar-nav]',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiCollapsibleComponent,\n UiCollapsibleTriggerComponent,\n UiCollapsibleContentComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuTriggerComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiSidebarHeaderComponent,\n UiSidebarContentComponent,\n UiSidebarFooterComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupLabelComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuSubComponent,\n UiSidebarMenuSubItemComponent,\n UiSidebarMenuSubButtonComponent,\n ],\n template: `\n \n \n \n\n \n \n Platform\n
    \n @for (item of navMain; track item.title) {\n @if (item.children?.length) {\n \n \n \n {{ item.title }}\n @if (item.badge) {\n {{ item.badge }}\n }\n \n \n \n
      \n @for (child of item.children; track child.title) {\n
    • \n \n {{ child.title }}\n \n
      • \n }\n
    \n     \n \n } @else {\n
  • \n \n \n {{ item.title }}\n @if (item.badge) {\n {{ item.badge }}\n }\n \n
    • \n }\n }\n
\n \n\n \n Stores\n
    \n @for (store of stores; track store.title) {\n
  • \n \n \n {{ store.title }}\n \n
    • \n }\n
\n \n\n \n
    \n @for (item of navSecondary; track item.title) {\n
  • \n \n \n {{ item.title }}\n \n
    • \n }\n
\n \n \n\n \n \n \n `,\n})\nexport class UiSalesSidebarNavComponent {\n readonly sidebar = injectSidebar()\n @Input() active = 'Dashboard'\n @Output() activeChange = new EventEmitter()\n\n protected readonly navMain = NAV_MAIN\n protected readonly navSecondary = NAV_SECONDARY\n protected readonly stores = STORES\n protected readonly teams = TEAMS\n\n protected readonly Settings = Settings\n protected readonly Plus = Plus\n protected readonly Check = Check\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly ChevronRight = ChevronRight\n protected readonly LogOut = LogOut\n\n private readonly expanded = signal('Orders')\n private readonly activeTeamSignal = signal(TEAMS[0]!)\n\n activeTeam(): SalesTeam {\n return this.activeTeamSignal()\n }\n\n isActive(title: string): boolean {\n return this.active === title\n }\n\n isExpanded(title: string): boolean {\n return this.expanded() === title\n }\n\n select(title: string): void {\n this.active = title\n this.activeChange.emit(title)\n }\n\n /** Accordion: opening a group closes the others. */\n setExpanded(title: string, open: boolean): void {\n this.expanded.set(open ? title : this.expanded() === title ? null : this.expanded())\n }\n\n toggleGroup(title: string): void {\n this.setExpanded(title, !this.isExpanded(title))\n }\n\n selectTeam(team: SalesTeam): void {\n this.activeTeamSignal.set(team)\n }\n}\n\n/**\n * Sales sidebar block: a `collapsible=\"icon\"` Sidebar around the nav. Place it inside\n * next to (with a ) --\n * the primitive then handles the icon rail, Cmd/Ctrl+B and the mobile sheet.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-sales-sidebar, [ui-sales-sidebar]',\n standalone: true,\n // Renders itself: keep this wrapper out of the provider's flex layout.\n host: { class: 'contents' },\n imports: [UiSidebarComponent, UiSidebarRailComponent, UiSalesSidebarNavComponent],\n template: `\n \n \n \n \n `,\n})\nexport class UiSalesSidebarComponent {\n @Input() active = 'Dashboard'\n @Output() activeChange = new EventEmitter()\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/sales-sidebar/sales-sidebar.component.ts" }, { "path": "packages/registry-angular/blocks/sales-sidebar/index.ts", "content": "export {\n UiSalesSidebarComponent,\n UiSalesSidebarNavComponent,\n type SalesNavItem,\n type SalesNavChild,\n type SalesTeam,\n} from './sales-sidebar.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/sales-sidebar/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/sidebar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/collapsible.json", "https://uipkge.dev/r/angular/dropdown-menu.json" ], "description": "App sidebar for sales workspaces: team switcher header, collapsible platform nav with badges, store list, secondary links, and user footer. Composed from the sidebar, collapsible, dropdown-menu and badge primitives; place inside for the icon rail, Cmd/Ctrl+B and mobile sheet. Selection flows through [(active)].", "categories": [ "layout", "sidebar" ] }