UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Starred Project Sidebar

blocklayout
Boilerplate repo

Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.

Installation

$npx uipkge-ng@latest add sidebar-06
Manifest:https://uipkge.dev/r/angular/sidebar-06.jsonInstalls to:src/app/components/blocks/sidebar-06/

Variants

Loading interactive previews…

npm dependencies

lucide-angular

Files installed (2)

  • src/app/components/blocks/sidebar-06/sidebar-06.component.ts18.3 kB
    // Colorful, customised HRMS-style sidebar -- branded project tiles, badges, status dots,
// and a user pill footer. Every row is spelled out inline so you can swap colors and
// labels in place. Port of the React block 1:1.
import { ChangeDetectionStrategy, Component } from '@angular/core'
import {
  Briefcase,
  Calendar,
  ChartLine,
  ChevronsUpDown,
  ClipboardList,
  Folder,
  GraduationCap,
  HeartPulse,
  HelpCircle,
  Inbox,
  LayoutDashboard,
  LucideAngularModule,
  Monitor,
  Moon,
  Palette,
  Search,
  Send,
  Settings as SettingsIcon,
  Star,
  Sun,
  Users,
} from 'lucide-angular'
import { injectTheme } from '@/lib/use-theme'
import { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'
import {
  UiDropdownMenuComponent,
  UiDropdownMenuContentComponent,
  UiDropdownMenuItemComponent,
  UiDropdownMenuLabelComponent,
  UiDropdownMenuRadioGroupComponent,
  UiDropdownMenuRadioItemComponent,
  UiDropdownMenuSeparatorComponent,
  UiDropdownMenuSubComponent,
  UiDropdownMenuSubContentComponent,
  UiDropdownMenuSubTriggerComponent,
  UiDropdownMenuTriggerComponent,
} from '@/ui/dropdown-menu/dropdown-menu.component'
import { UiInputComponent } from '@/ui/input/input.component'
import {
  UiSidebarComponent,
  UiSidebarContentComponent,
  UiSidebarFooterComponent,
  UiSidebarGroupComponent,
  UiSidebarGroupContentComponent,
  UiSidebarGroupLabelComponent,
  UiSidebarHeaderComponent,
  UiSidebarMenuBadgeComponent,
  UiSidebarMenuButtonComponent,
  UiSidebarMenuComponent,
  UiSidebarMenuItemComponent,
  UiSidebarRailComponent,
  UiSidebarSeparatorComponent,
  injectSidebar,
} from '@/ui/sidebar/sidebar.component'

/**
 * Sidebar06 -- the React block, 1:1: a `collapsible="icon"` Sidebar with a brand +
 * search header, workspace / workforce / starred-project / team / admin groups, and a
 * user pill footer with a theme radio submenu. It reads the surrounding
 * <ui-sidebar-provider> (pair with <ui-sidebar-inset> + <ui-sidebar-trigger>).
 * Edit the rows below to change routes; wire the user to your auth session.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-sidebar-06, [ui-sidebar-06]',
  standalone: true,
  // React renders <Sidebar> itself: keep this wrapper out of the provider's flex layout.
  host: { class: 'contents' },
  imports: [
    LucideAngularModule,
    UiAvatarComponent,
    UiAvatarFallbackComponent,
    UiDropdownMenuComponent,
    UiDropdownMenuTriggerComponent,
    UiDropdownMenuContentComponent,
    UiDropdownMenuLabelComponent,
    UiDropdownMenuSeparatorComponent,
    UiDropdownMenuItemComponent,
    UiDropdownMenuRadioGroupComponent,
    UiDropdownMenuRadioItemComponent,
    UiDropdownMenuSubComponent,
    UiDropdownMenuSubTriggerComponent,
    UiDropdownMenuSubContentComponent,
    UiInputComponent,
    UiSidebarComponent,
    UiSidebarHeaderComponent,
    UiSidebarContentComponent,
    UiSidebarFooterComponent,
    UiSidebarGroupComponent,
    UiSidebarGroupLabelComponent,
    UiSidebarGroupContentComponent,
    UiSidebarMenuComponent,
    UiSidebarMenuItemComponent,
    UiSidebarMenuButtonComponent,
    UiSidebarMenuBadgeComponent,
    UiSidebarSeparatorComponent,
    UiSidebarRailComponent,
  ],
  template: `
    <ui-sidebar collapsible="icon">
      <ui-sidebar-header>
        <ul ui-sidebar-menu>
          <li ui-sidebar-menu-item>
            <button
              type="button"
              ui-sidebar-menu-button
              size="lg"
              tooltip="uipkge"
              class="group-data-[collapsible=icon]:!justify-center"
            >
              <div
                class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg shadow-sm group-data-[collapsible=icon]:size-6"
              >
                <svg
                  viewBox="0 0 24 24"
                  class="size-4 group-data-[collapsible=icon]:size-3.5"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span class="font-display truncate font-bold">uipkge</span>
                <span class="text-muted-foreground truncate text-xs">uipkge.dev</span>
              </div>
            </button>
          </li>
        </ul>

        <div class="px-1 pt-1 group-data-[collapsible=icon]:hidden">
          <ui-input
            type="text"
            placeholder="Search..."
            allowClear
            [prefix]="searchPrefix"
            [suffix]="searchSuffix"
            class="bg-background h-8 w-full shadow-none"
          />
          <ng-template #searchPrefix>
            <lucide-icon [img]="Search" class="text-muted-foreground size-3.5" />
          </ng-template>
          <ng-template #searchSuffix>
            <kbd
              class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-xs font-medium select-none"
            >
              <span>&#8984;</span>F
            </kbd>
          </ng-template>
        </div>
      </ui-sidebar-header>

      <ui-sidebar-content>
        <ui-sidebar-group>
          <ui-sidebar-group-content>
            <ul ui-sidebar-menu>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button isActive tooltip="Dashboard">
                  <lucide-icon [img]="LayoutDashboard" class="size-4" />
                  <span>Dashboard</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Employees">
                  <lucide-icon [img]="Users" class="size-4" />
                  <span>Employees</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Clients">
                  <lucide-icon [img]="Briefcase" class="size-4" />
                  <span>Clients</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Projects">
                  <lucide-icon [img]="Folder" class="size-4" />
                  <span>Projects</span>
                </button>
              </li>
            </ul>
          </ui-sidebar-group-content>
        </ui-sidebar-group>

        <ui-sidebar-separator />

        <ui-sidebar-group>
          <ui-sidebar-group-label>Workforce</ui-sidebar-group-label>
          <ui-sidebar-group-content>
            <ul ui-sidebar-menu>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Calendar">
                  <lucide-icon [img]="Calendar" class="size-4" />
                  <span>Calendar</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Attendance">
                  <lucide-icon [img]="ClipboardList" class="size-4" />
                  <span>Attendance</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Inbox">
                  <lucide-icon [img]="Inbox" class="size-4" />
                  <span>Inbox</span>
                </button>
                <ui-sidebar-menu-badge class="bg-destructive text-white">6</ui-sidebar-menu-badge>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Analytics">
                  <lucide-icon [img]="ChartLine" class="size-4" />
                  <span>Analytics</span>
                </button>
              </li>
            </ul>
          </ui-sidebar-group-content>
        </ui-sidebar-group>

        <ui-sidebar-separator />

        <ui-sidebar-group>
          <ui-sidebar-group-label>Projects</ui-sidebar-group-label>
          <ui-sidebar-group-content>
            <ul ui-sidebar-menu>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Shift Planner">
                  <div
                    class="bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                  >
                    <lucide-icon [img]="Folder" class="size-3" />
                  </div>
                  <span>Shift Planner</span>
                </button>
                <ui-sidebar-menu-badge class="text-warning">
                  <lucide-icon [img]="Star" class="size-3.5 fill-current" />
                </ui-sidebar-menu-badge>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Training Portal">
                  <div
                    class="bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                  >
                    <lucide-icon [img]="GraduationCap" class="size-3" />
                  </div>
                  <span>Training Portal</span>
                </button>
                <ui-sidebar-menu-badge class="text-warning">
                  <lucide-icon [img]="Star" class="size-3.5 fill-current" />
                </ui-sidebar-menu-badge>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Performance Hub">
                  <div
                    class="bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                  >
                    <lucide-icon [img]="HeartPulse" class="size-3" />
                  </div>
                  <span>Performance Hub</span>
                </button>
                <ui-sidebar-menu-badge class="text-warning">
                  <lucide-icon [img]="Star" class="size-3.5 fill-current" />
                </ui-sidebar-menu-badge>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Expense Claims">
                  <div
                    class="bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                  >
                    <lucide-icon [img]="ChartLine" class="size-3" />
                  </div>
                  <span>Expense Claims</span>
                </button>
                <ui-sidebar-menu-badge class="text-warning">
                  <lucide-icon [img]="Star" class="size-3.5 fill-current" />
                </ui-sidebar-menu-badge>
              </li>
            </ul>
          </ui-sidebar-group-content>
        </ui-sidebar-group>

        <ui-sidebar-separator />

        <ui-sidebar-group>
          <ui-sidebar-group-label>My team</ui-sidebar-group-label>
          <ui-sidebar-group-content>
            <ul ui-sidebar-menu>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Olivia Bennett">
                  <ui-avatar class="size-5">
                    <ui-avatar-fallback class="bg-chart-1/15 text-foreground text-xs">OB</ui-avatar-fallback>
                  </ui-avatar>
                  <span>Olivia Bennett</span>
                </button>
                <ui-sidebar-menu-badge>
                  <span class="bg-destructive size-1.5 rounded-full"></span>
                </ui-sidebar-menu-badge>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Daniel Morgan">
                  <ui-avatar class="size-5">
                    <ui-avatar-fallback class="bg-chart-2/15 text-foreground text-xs">DM</ui-avatar-fallback>
                  </ui-avatar>
                  <span>Daniel Morgan</span>
                </button>
                <ui-sidebar-menu-badge>
                  <span class="bg-warning size-1.5 rounded-full"></span>
                </ui-sidebar-menu-badge>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Ethan Reynolds">
                  <ui-avatar class="size-5">
                    <ui-avatar-fallback class="bg-chart-3/15 text-foreground text-xs">ER</ui-avatar-fallback>
                  </ui-avatar>
                  <span>Ethan Reynolds</span>
                </button>
                <ui-sidebar-menu-badge>
                  <span class="bg-success size-1.5 rounded-full"></span>
                </ui-sidebar-menu-badge>
              </li>
            </ul>
          </ui-sidebar-group-content>
        </ui-sidebar-group>

        <ui-sidebar-separator />

        <ui-sidebar-group>
          <ui-sidebar-group-label>Administration</ui-sidebar-group-label>
          <ui-sidebar-group-content>
            <ul ui-sidebar-menu>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Settings">
                  <lucide-icon [img]="SettingsIcon" class="size-4" />
                  <span>Settings</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Help center">
                  <lucide-icon [img]="HelpCircle" class="size-4" />
                  <span>Help center</span>
                </button>
              </li>
            </ul>
          </ui-sidebar-group-content>
        </ui-sidebar-group>
      </ui-sidebar-content>

      <ui-sidebar-footer>
        <ul ui-sidebar-menu>
          <li ui-sidebar-menu-item>
            <ui-dropdown-menu>
              <button
                type="button"
                ui-sidebar-menu-button
                ui-dropdown-menu-trigger
                size="lg"
                class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
              >
                <span class="relative shrink-0">
                  <ui-avatar class="h-8 w-8 rounded-lg group-data-[collapsible=icon]:size-6">
                    <ui-avatar-fallback class="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs"
                      >JC</ui-avatar-fallback
                    >
                  </ui-avatar>
                  <span
                    class="bg-destructive ring-sidebar absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"
                  ></span>
                </span>
                <span class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                  <span class="truncate font-medium">James Carter</span>
                  <span class="text-muted-foreground truncate text-xs">Admin</span>
                </span>
                <lucide-icon [img]="ChevronsUpDown" class="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
              </button>
              <ui-dropdown-menu-content
                class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                [side]="sidebar.isMobile ? 'bottom' : 'right'"
                align="end"
                [sideOffset]="4"
              >
                <ui-dropdown-menu-label>James Carter</ui-dropdown-menu-label>
                <ui-dropdown-menu-separator />
                <ui-dropdown-menu-item>
                  <lucide-icon [img]="Send" class="size-4" /> Invite teammates
                </ui-dropdown-menu-item>
                <ui-dropdown-menu-item>
                  <lucide-icon [img]="SettingsIcon" class="size-4" /> Workspace settings
                </ui-dropdown-menu-item>
                <ui-dropdown-menu-separator />
                <ui-dropdown-menu-sub>
                  <ui-dropdown-menu-sub-trigger>
                    <lucide-icon [img]="Palette" class="size-4" />
                    Theme
                    <span class="text-muted-foreground ml-auto text-xs capitalize">{{ theme.theme() }}</span>
                  </ui-dropdown-menu-sub-trigger>
                  <ui-dropdown-menu-sub-content class="min-w-36">
                    <ui-dropdown-menu-radio-group [value]="theme.theme()" (valueChange)="theme.setTheme($any($event))">
                      <ui-dropdown-menu-radio-item value="light">
                        <lucide-icon [img]="Sun" class="size-4" /> Light
                      </ui-dropdown-menu-radio-item>
                      <ui-dropdown-menu-radio-item value="dark">
                        <lucide-icon [img]="Moon" class="size-4" /> Dark
                      </ui-dropdown-menu-radio-item>
                      <ui-dropdown-menu-radio-item value="system">
                        <lucide-icon [img]="Monitor" class="size-4" /> System
                      </ui-dropdown-menu-radio-item>
                    </ui-dropdown-menu-radio-group>
                  </ui-dropdown-menu-sub-content>
                </ui-dropdown-menu-sub>
              </ui-dropdown-menu-content>
            </ui-dropdown-menu>
          </li>
        </ul>
      </ui-sidebar-footer>

      <button ui-sidebar-rail></button>
    </ui-sidebar>
  `,
})
export class UiSidebar06Component {
  readonly sidebar = injectSidebar()
  readonly theme = injectTheme()

  protected readonly Briefcase = Briefcase
  protected readonly Calendar = Calendar
  protected readonly ChartLine = ChartLine
  protected readonly ChevronsUpDown = ChevronsUpDown
  protected readonly ClipboardList = ClipboardList
  protected readonly Folder = Folder
  protected readonly GraduationCap = GraduationCap
  protected readonly HeartPulse = HeartPulse
  protected readonly HelpCircle = HelpCircle
  protected readonly Inbox = Inbox
  protected readonly LayoutDashboard = LayoutDashboard
  protected readonly Monitor = Monitor
  protected readonly Moon = Moon
  protected readonly Palette = Palette
  protected readonly Search = Search
  protected readonly Send = Send
  protected readonly SettingsIcon = SettingsIcon
  protected readonly Star = Star
  protected readonly Sun = Sun
  protected readonly Users = Users
}
  • src/app/components/blocks/sidebar-06/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/sidebar-06.json