Team Switcher Sidebar

blocklayout

Full-featured app sidebar — collapsible="icon" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer with theme switching. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.

Installation

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

$npx uipkge-ng@latest add sidebar-02

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

$bunx uipkge-ng@latest add sidebar-02

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

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

SidebarSubItem

interface SidebarSubItem {
  title: string
  url: string
  isActive?: boolean
}

SidebarNavItem

interface SidebarNavItem {
  title: string
  url: string
  icon: LucideIconData
  isActive?: boolean
  items?: SidebarSubItem[]
}

SidebarProject

interface SidebarProject {
  name: string
  url: string
  icon: LucideIconData
}

SidebarTeam

interface SidebarTeam {
  name: string
  plan: string
  logo: LucideIconData | 'uipkge'
}

SidebarUser

interface SidebarUser {
  name: string
  email: string
}

npm dependencies

lucide-angular

Includes

sidebar avatar collapsible dropdown-menu use-theme

Files installed (8)

src/app/components/blocks/sidebar-02/sidebar-02.component.ts3.7 kB

import { Component, ChangeDetectionStrategy } from '@angular/core'
import {
  UiSidebarComponent,
  UiSidebarContentComponent,
  UiSidebarFooterComponent,
  UiSidebarHeaderComponent,
  UiSidebarRailComponent,
} from '@/ui/sidebar/sidebar.component'
import {
  BookOpen,
  Bot,
  Frame,
  LifeBuoy,
  Map as MapIcon,
  PieChart,
  Send,
  Settings2,
  SquareTerminal,
} from 'lucide-angular'
import { NavMainComponent } from './nav-main.component'
import { NavProjectsComponent } from './nav-projects.component'
import { NavSecondaryComponent } from './nav-secondary.component'
import { NavUserComponent } from './nav-user.component'
import { TeamSwitcherComponent } from './team-switcher.component'
import type { SidebarNavItem, SidebarProject, SidebarUser } from './sidebar-02.models'

const data: {
  user: SidebarUser
  navMain: SidebarNavItem[]
  navSecondary: SidebarNavItem[]
  projects: SidebarProject[]
} = {
  user: {
    name: 'shadcn',
    email: '[email protected]',
  },
  navMain: [
    {
      title: 'Playground',
      url: '#',
      icon: SquareTerminal,
      isActive: true,
      items: [
        { title: 'History', url: '#' },
        { title: 'Starred', url: '#' },
        { title: 'Settings', url: '#' },
      ],
    },
    {
      title: 'Models',
      url: '#',
      icon: Bot,
      items: [
        { title: 'Genesis', url: '#' },
        { title: 'Explorer', url: '#' },
        { title: 'Quantum', url: '#' },
      ],
    },
    {
      title: 'Documentation',
      url: '#',
      icon: BookOpen,
      items: [
        { title: 'Introduction', url: '#' },
        { title: 'Get Started', url: '#' },
        { title: 'Tutorials', url: '#' },
        { title: 'Changelog', url: '#' },
      ],
    },
    {
      title: 'Settings',
      url: '#',
      icon: Settings2,
      items: [
        { title: 'General', url: '#' },
        { title: 'Team', url: '#' },
        { title: 'Billing', url: '#' },
        { title: 'Limits', url: '#' },
      ],
    },
  ],
  navSecondary: [
    { title: 'Support', url: '#', icon: LifeBuoy },
    { title: 'Feedback', url: '#', icon: Send },
  ],
  projects: [
    { name: 'Design Engineering', url: '#', icon: Frame },
    { name: 'Sales & Marketing', url: '#', icon: PieChart },
    { name: 'Travel', url: '#', icon: MapIcon },
  ],
}

/**
 * Sidebar02 -- the React block, 1:1: a `collapsible="icon"` Sidebar with TeamSwitcher
 * header, primary nav, projects, secondary links and a user dropdown footer. It reads
 * the surrounding <ui-sidebar-provider> (pair with <ui-sidebar-inset> +
 * <ui-sidebar-trigger>), so the trigger, the rail and Cmd/Ctrl+B all collapse it.
 * Edit `data` to change routes; each section is a sibling file.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-sidebar-02, [ui-sidebar-02]',
  standalone: true,
  // React renders <Sidebar> itself: keep this wrapper out of the provider's flex layout.
  host: { class: 'contents' },
  imports: [
    UiSidebarComponent,
    UiSidebarHeaderComponent,
    UiSidebarContentComponent,
    UiSidebarFooterComponent,
    UiSidebarRailComponent,
    TeamSwitcherComponent,
    NavMainComponent,
    NavProjectsComponent,
    NavSecondaryComponent,
    NavUserComponent,
  ],
  template: `
    <ui-sidebar collapsible="icon">
      <ui-sidebar-header>
        <team-switcher />
      </ui-sidebar-header>
      <ui-sidebar-content>
        <nav-main [items]="data.navMain" />
        <nav-projects [projects]="data.projects" />
        <nav-secondary [items]="data.navSecondary" class="mt-auto" />
      </ui-sidebar-content>
      <ui-sidebar-footer>
        <nav-user [user]="data.user" />
      </ui-sidebar-footer>
      <button ui-sidebar-rail></button>
    </ui-sidebar>
  `,
})
export class UiSidebar02Component {
  readonly data = data
}

src/app/components/blocks/sidebar-02/sidebar-02.models.ts0.6 kB

src/app/components/blocks/sidebar-02/team-switcher.component.ts5.9 kB

src/app/components/blocks/sidebar-02/nav-main.component.ts2.7 kB

src/app/components/blocks/sidebar-02/nav-projects.component.ts3.8 kB

src/app/components/blocks/sidebar-02/nav-secondary.component.ts1.5 kB

src/app/components/blocks/sidebar-02/nav-user.component.ts6.6 kB

src/app/components/blocks/sidebar-02/index.ts0.5 kB

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

Change language