Icon Rail Sidebar

blocklayout

Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer with theme switching. Pure template, no props — edit the files to change routes and wire your auth session.

Installation

$pnpm dlx uipkge-ng@latest add sidebar-01

$npx uipkge-ng@latest add sidebar-01

$yarn dlx uipkge-ng@latest add sidebar-01

$bunx uipkge-ng@latest add sidebar-01

Manifest:https://uipkge.dev/r/angular/sidebar-01.jsonInstalls to:src/app/components/blocks/sidebar-01/

Variants

Loading interactive previews…

npm dependencies

lucide-angular

Includes

sidebar avatar dropdown-menu use-theme

Files installed (3)

src/app/components/blocks/sidebar-01/sidebar-01.component.ts6.3 kB

// Edit this file to change brand, navigation, and the user dropdown.
// Every menu item is spelled out below -- copy, remove, or rename rows directly.
import { Component, ChangeDetectionStrategy } from '@angular/core'
import {
  BarChart3,
  BookOpen,
  FileText,
  Files,
  History,
  LayoutDashboard,
  LucideAngularModule,
  Table as TableIcon,
} from 'lucide-angular'
import {
  UiSidebarComponent,
  UiSidebarContentComponent,
  UiSidebarFooterComponent,
  UiSidebarGroupComponent,
  UiSidebarGroupContentComponent,
  UiSidebarGroupLabelComponent,
  UiSidebarHeaderComponent,
  UiSidebarMenuButtonComponent,
  UiSidebarMenuComponent,
  UiSidebarMenuItemComponent,
  UiSidebarRailComponent,
} from '@/ui/sidebar/sidebar.component'
import { Sidebar01NavUserComponent } from './nav-user-01.component'

/**
 * Sidebar01 -- the React block, 1:1: a `collapsible="icon"` Sidebar with a brand
 * row, Workspace + Resources groups and a user dropdown footer. It reads the
 * surrounding <ui-sidebar-provider>, so <ui-sidebar-trigger>, the rail and
 * Cmd/Ctrl+B collapse it to the icon rail (labels become tooltips).
 */
@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-sidebar-01, [ui-sidebar-01]',
  standalone: true,
  // React renders <Sidebar> itself: keep this wrapper out of the provider's flex layout.
  host: { class: 'contents' },
  imports: [
    LucideAngularModule,
    UiSidebarComponent,
    UiSidebarHeaderComponent,
    UiSidebarContentComponent,
    UiSidebarFooterComponent,
    UiSidebarGroupComponent,
    UiSidebarGroupLabelComponent,
    UiSidebarGroupContentComponent,
    UiSidebarMenuComponent,
    UiSidebarMenuItemComponent,
    UiSidebarMenuButtonComponent,
    UiSidebarRailComponent,
    Sidebar01NavUserComponent,
  ],
  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 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>
      </ui-sidebar-header>
      <ui-sidebar-content>
        <ui-sidebar-group>
          <ui-sidebar-group-label>Workspace</ui-sidebar-group-label>
          <ui-sidebar-group-content>
            <ul ui-sidebar-menu>
              <li ui-sidebar-menu-item>
                <!-- TODO: wrap in a routerLink and bind isActive to your route -->
                <button type="button" ui-sidebar-menu-button isActive tooltip="Dashboard">
                  <lucide-icon [img]="LayoutDashboard" class="size-4 shrink-0" />
                  <span>Dashboard</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Data tables">
                  <lucide-icon [img]="TableIcon" class="size-4 shrink-0" />
                  <span>Data tables</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Forms">
                  <lucide-icon [img]="FileText" class="size-4 shrink-0" />
                  <span>Forms</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Charts">
                  <lucide-icon [img]="BarChart3" class="size-4 shrink-0" />
                  <span>Charts</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Pages">
                  <lucide-icon [img]="Files" class="size-4 shrink-0" />
                  <span>Pages</span>
                </button>
              </li>
            </ul>
          </ui-sidebar-group-content>
        </ui-sidebar-group>
        <ui-sidebar-group>
          <ui-sidebar-group-label>Resources</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="Docs">
                  <lucide-icon [img]="BookOpen" class="size-4 shrink-0" />
                  <span>Docs</span>
                </button>
              </li>
              <li ui-sidebar-menu-item>
                <button type="button" ui-sidebar-menu-button tooltip="Changelog">
                  <lucide-icon [img]="History" class="size-4 shrink-0" />
                  <span>Changelog</span>
                </button>
              </li>
            </ul>
          </ui-sidebar-group-content>
        </ui-sidebar-group>
      </ui-sidebar-content>
      <ui-sidebar-footer>
        <sidebar-01-nav-user />
      </ui-sidebar-footer>
      <button ui-sidebar-rail></button>
    </ui-sidebar>
  `,
})
export class UiSidebar01Component {
  protected readonly LayoutDashboard = LayoutDashboard
  protected readonly TableIcon = TableIcon
  protected readonly FileText = FileText
  protected readonly BarChart3 = BarChart3
  protected readonly Files = Files
  protected readonly BookOpen = BookOpen
  protected readonly History = History
}

src/app/components/blocks/sidebar-01/nav-user-01.component.ts6.4 kB

src/app/components/blocks/sidebar-01/index.ts0.1 kB

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

Change language