{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "dashboard-layout", "title": "Dashboard Layout", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/dashboard-layout/dashboard-layout.component.ts", "content": "// Full dashboard shell — collapsible sidebar + sticky topbar (sidebar trigger, breadcrumb,\n// command palette affordance, theme switch, notifications) + main content projection.\n// Drop it around a page: `page`.\n//\n// NOTE (Angular port): mirrors the React port 1:1 — the Vue original composes the\n// `sidebar-02`, `command-palette`, and `notifications-popover` blocks, which don't exist in\n// the Angular registry. Until they're ported, the sidebar body is a minimal inline nav and\n// notifications is a plain Bell button. Swap them for the dedicated blocks once available.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { Bell, LayoutDashboard, LucideAngularModule, Settings, Users } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport {\n UiBreadcrumbComponent,\n UiBreadcrumbItemComponent,\n UiBreadcrumbLinkComponent,\n UiBreadcrumbListComponent,\n UiBreadcrumbPageComponent,\n UiBreadcrumbSeparatorComponent,\n} from '@/ui/breadcrumb/breadcrumb.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarHeaderComponent,\n UiSidebarInsetComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarProviderComponent,\n UiSidebarRailComponent,\n UiSidebarTriggerComponent,\n} from '@/ui/sidebar/sidebar.component'\nimport { UiThemeSwitchComponent } from '@/ui/theme-switch/theme-switch.component'\n\nexport interface DashboardCrumb {\n label: string\n href?: string\n}\n\nconst NAV = [\n { label: 'Dashboard', icon: LayoutDashboard },\n { label: 'People', icon: Users },\n { label: 'Settings', icon: Settings },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-dashboard-layout, [ui-dashboard-layout]',\n standalone: true,\n // React renders the provider itself: the host stays out of layout and `class` goes to the provider.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBreadcrumbComponent,\n UiBreadcrumbItemComponent,\n UiBreadcrumbLinkComponent,\n UiBreadcrumbListComponent,\n UiBreadcrumbPageComponent,\n UiBreadcrumbSeparatorComponent,\n UiButtonComponent,\n UiSeparatorComponent,\n UiSidebarComponent,\n UiSidebarContentComponent,\n UiSidebarGroupComponent,\n UiSidebarGroupContentComponent,\n UiSidebarHeaderComponent,\n UiSidebarInsetComponent,\n UiSidebarMenuButtonComponent,\n UiSidebarMenuComponent,\n UiSidebarMenuItemComponent,\n UiSidebarProviderComponent,\n UiSidebarRailComponent,\n UiSidebarTriggerComponent,\n UiThemeSwitchComponent,\n ],\n template: `\n \n
\n \n Skip to content\n \n \n \n \n \n \n @for (item of nav; track item.label) {\n \n \n \n {{ item.label }}\n \n \n }\n \n \n \n \n \n \n \n \n
\n \n \n \n \n @for (crumb of crumbs; track crumb.label; let i = $index; let last = $last) {\n \n @if (crumb.href && !last) {\n \n {{ crumb.label }}\n \n } @else {\n {{ crumb.label }}\n }\n \n @if (!last) {\n \n }\n }\n \n \n
\n
\n
\n \n \n \n \n \n
\n
\n \n
\n \n
\n \n \n
\n `,\n})\nexport class UiDashboardLayoutComponent {\n protected readonly Bell = Bell\n protected readonly nav = NAV.map((n) => ({ ...n }))\n\n @Input() breadcrumbs: DashboardCrumb[] = [{ label: 'Dashboard' }]\n @Input() user: { name: string; email: string; avatar?: string } = { name: 'Alex Morgan', email: 'alex@example.com' }\n @Input('class') className?: string\n\n get crumbs(): DashboardCrumb[] {\n return this.breadcrumbs?.length ? this.breadcrumbs : [{ label: 'Dashboard' }]\n }\n\n get rootClass(): string {\n return cn(this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/dashboard-layout/dashboard-layout.component.ts" }, { "path": "packages/registry-angular/blocks/dashboard-layout/index.ts", "content": "export { UiDashboardLayoutComponent, type DashboardCrumb } from './dashboard-layout.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/dashboard-layout/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/theme-switch.json", "https://uipkge.dev/r/angular/sidebar.json", "https://uipkge.dev/r/angular/breadcrumb.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Full dashboard shell — collapsible sidebar + sticky topbar (sidebar trigger, breadcrumb, theme switch, notifications) + main content projection. Drop it around a page: `page`.", "categories": [ "layout", "dashboard" ] }