# Sidebar Replacement

> A sidebar replacement block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/sidebar-06).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/sidebar-06
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/sidebar-06-light-b98638d47a5bc96d.png
- Registry item: https://blocks.so/r/sidebar-06.json
- Categories: sidebar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/sidebar-06.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@tabler/icons-react`, `lucide-react`
- Registry items: `avatar`, `dropdown-menu`, `sidebar`

## Files

### `content/components/sidebar/sidebar-06/team-switcher.tsx`

```tsx
'use client';

import { ChevronsUpDown, Plus } from 'lucide-react';
import * as React from 'react';

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar';

export function TeamSwitcher({
  teams,
}: {
  teams: {
    name: string;
    logo: React.ElementType;
    plan: string;
  }[];
}) {
  const { isMobile } = useSidebar();
  const [activeTeam, setActiveTeam] = React.useState(teams[0]);

  if (!activeTeam) {
    return null;
  }

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <SidebarMenuButton
                className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground"
                size="lg"
              />
            }
          >
            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-accent text-sidebar-accent-foreground">
              <activeTeam.logo className="size-4" />
            </div>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-medium">{activeTeam.name}</span>
              <span className="truncate text-xs">{activeTeam.plan}</span>
            </div>
            <ChevronsUpDown className="ml-auto" />
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="start"
            className="w-(--anchor-width) min-w-56 rounded-lg"
            side={isMobile ? 'bottom' : 'right'}
            sideOffset={4}
          >
            <DropdownMenuLabel className="text-muted-foreground text-xs">
              Teams
            </DropdownMenuLabel>
            {teams.map((team, index) => (
              <DropdownMenuItem
                className="gap-2 p-2"
                key={team.name}
                onClick={() => setActiveTeam(team)}
              >
                <div className="flex size-6 items-center justify-center rounded-md border">
                  <team.logo className="size-3.5 shrink-0" />
                </div>
                {team.name}
                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
              </DropdownMenuItem>
            ))}
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-2 p-2">
              <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                <Plus className="size-4" />
              </div>
              <div className="font-medium text-muted-foreground">Add team</div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}
```

### `content/components/sidebar/sidebar-06/app/page.tsx`

```tsx
'use client';

import { SidebarProvider } from '@/components/ui/sidebar';
import { AppSidebar } from '@/components/sidebar-06/app-sidebar';

export default function Page() {
  return (
    <SidebarProvider>
      <div className="flex h-dvh w-full">
        <AppSidebar />
      </div>
    </SidebarProvider>
  );
}
```

### `content/components/sidebar/sidebar-06/app-sidebar.tsx`

```tsx
'use client';

import {
  IconActivityHeartbeat,
  IconArchive,
  IconArrowLeft,
  IconBackground,
  IconBellRinging,
  IconBrandGoogle,
  IconBrandMeta,
  IconBrandNpm,
  IconBrandOpenai,
  IconBug,
  IconChartBar,
  IconChevronRight,
  IconCloud,
  IconDatabase,
  IconFileText,
  IconFolder,
  IconFolders,
  IconGitCommit,
  IconGitMerge,
  IconGitPullRequest,
  IconHome,
  IconKey,
  IconLockExclamation,
  IconLockPassword,
  IconLogout,
  IconNorthStar,
  IconPackageExport,
  IconPackages,
  IconPasswordFingerprint,
  IconPlayerPlay,
  IconScanEye,
  IconSettings,
  IconShieldLock,
  IconStar,
  IconTarget,
  IconTerminal2,
  IconUser,
  IconUserPlus,
  IconWebhook,
} from '@tabler/icons-react';
import type React from 'react';
import { useState } from 'react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar';
import { cn } from '@/lib/utils';
import { TeamSwitcher } from '@/components/sidebar-06/team-switcher';

const data = {
  teams: [
    {
      name: 'OpenAI',
      logo: IconBrandOpenai,
      plan: 'Enterprise',
    },
    {
      name: 'Anthropic',
      logo: IconNorthStar,
      plan: 'Pro',
    },
    {
      name: 'Google',
      logo: IconBrandGoogle,
      plan: 'Free',
    },
    {
      name: 'Meta',
      logo: IconBrandMeta,
      plan: 'Free',
    },
  ],
};

interface SidebarItem {
  id: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  badge?: string;
  route?: string;
  subItems?: {
    id: string;
    label: string;
    icon: React.ComponentType<{ className?: string }>;
    route?: string;
  }[];
}

const sidebarItems: SidebarItem[] = [
  {
    id: 'overview',
    label: 'Overview',
    icon: IconHome,
    subItems: [
      {
        id: 'dashboard',
        label: 'Dashboard',
        icon: IconChartBar,
        route: '/overview/dashboard',
      },
      {
        id: 'activity',
        label: 'Activity',
        icon: IconActivityHeartbeat,
        route: '/overview/activity',
      },
      {
        id: 'insights',
        label: 'Insights',
        icon: IconTarget,
        route: '/overview/insights',
      },
    ],
  },
  {
    id: 'repositories',
    label: 'Repositories',
    icon: IconFolders,
    badge: '12',
    subItems: [
      {
        id: 'all-repos',
        label: 'All Repositories',
        icon: IconFolder,
        route: '/repositories',
      },
      {
        id: 'starred',
        label: 'Starred',
        icon: IconStar,
        route: '/repositories/starred',
      },
      {
        id: 'archived',
        label: 'Archived',
        icon: IconArchive,
        route: '/repositories/archived',
      },
    ],
  },
  {
    id: 'pull-requests',
    label: 'Pull Requests',
    icon: IconGitPullRequest,
    badge: '3',
    subItems: [
      {
        id: 'open-prs',
        label: 'Open',
        icon: IconGitPullRequest,
        route: '/pull-requests/open',
      },
      {
        id: 'review-requests',
        label: 'Review Requests',
        icon: IconScanEye,
        route: '/pull-requests/review',
      },
      {
        id: 'merged',
        label: 'Merged',
        icon: IconGitMerge,
        route: '/pull-requests/merged',
      },
    ],
  },
  {
    id: 'issues',
    label: 'Issues',
    icon: IconBug,
    badge: '7',
    subItems: [
      {
        id: 'open-issues',
        label: 'Open Issues',
        icon: IconBug,
        route: '/issues/open',
      },
      {
        id: 'assigned',
        label: 'Assigned to Me',
        icon: IconUserPlus,
        route: '/issues/assigned',
      },
      {
        id: 'created',
        label: 'Created by Me',
        icon: IconGitCommit,
        route: '/issues/created',
      },
    ],
  },
  {
    id: 'actions',
    label: 'Actions',
    icon: IconBackground,
    subItems: [
      {
        id: 'workflows',
        label: 'Workflows',
        icon: IconPlayerPlay,
        route: '/actions/workflows',
      },
      {
        id: 'runners',
        label: 'Runners',
        icon: IconTerminal2,
        route: '/actions/runners',
      },
      {
        id: 'deployments',
        label: 'Deployments',
        icon: IconCloud,
        route: '/actions/deployments',
      },
    ],
  },
  {
    id: 'packages',
    label: 'Packages',
    icon: IconPackages,
    subItems: [
      {
        id: 'published',
        label: 'Published',
        icon: IconPackageExport,
        route: '/packages/published',
      },
      {
        id: 'container-registry',
        label: 'Container Registry',
        icon: IconDatabase,
        route: '/packages/containers',
      },
      {
        id: 'npm-packages',
        label: 'npm Packages',
        icon: IconBrandNpm,
        route: '/packages/npm',
      },
    ],
  },
  {
    id: 'security',
    label: 'Security',
    icon: IconLockPassword,
    badge: '2',
    subItems: [
      {
        id: 'alerts',
        label: 'Security Alerts',
        icon: IconLockExclamation,
        route: '/security/alerts',
      },
      {
        id: 'advisories',
        label: 'Advisories',
        icon: IconShieldLock,
        route: '/security/advisories',
      },
      {
        id: 'secrets',
        label: 'Secrets',
        icon: IconPasswordFingerprint,
        route: '/security/secrets',
      },
    ],
  },
  {
    id: 'settings',
    label: 'Settings',
    icon: IconSettings,
    subItems: [
      {
        id: 'profile',
        label: 'Profile',
        icon: IconUser,
        route: '/settings/profile',
      },
      {
        id: 'notifications',
        label: 'Notifications',
        icon: IconBellRinging,
        route: '/settings/notifications',
      },
      {
        id: 'webhooks',
        label: 'Webhooks',
        icon: IconWebhook,
        route: '/settings/webhooks',
      },
      {
        id: 'api-keys',
        label: 'API Keys',
        icon: IconKey,
        route: '/settings/api-keys',
      },
    ],
  },
  {
    id: 'docs',
    label: 'Documentation',
    icon: IconFileText,
    route: '/docs',
  },
];

export function AppSidebar() {
  const [activeItem, setActiveItem] = useState<string | null>(null);
  const [selectedSubItem, setSelectedSubItem] = useState<string | null>(null);

  const activeItemData = sidebarItems.find((item) => item.id === activeItem);

  const handleItemClick = (item: SidebarItem) => {
    if (item.subItems) {
      setActiveItem(item.id);
      setSelectedSubItem(null);
    } else {
      console.log(`[v0] Navigating to: ${item.route}`);
    }
  };

  const handleSubItemClick = (subItem: { id: string; route?: string }) => {
    setSelectedSubItem(selectedSubItem === subItem.id ? null : subItem.id);
    if (subItem.route) {
      console.log(`[v0] Navigating to: ${subItem.route}`);
    }
  };

  const handleBackToMain = () => {
    setActiveItem(null);
    setSelectedSubItem(null);
  };

  return (
    <div className="flex h-dvh bg-background">
      <Sidebar
        className="w-64 border-r"
        collapsible="none"
        side="left"
        variant="sidebar"
      >
        {activeItem ? (
          activeItemData?.subItems && (
            <>
              <SidebarHeader className="flex flex-row items-center justify-between border-b px-4">
                <button
                  className="flex h-8 w-8 items-center justify-center rounded-md p-0 hover:bg-sidebar-accent"
                  onClick={handleBackToMain}
                >
                  <IconArrowLeft className="h-4 w-4" />
                </button>
                <h3 className="flex-1 text-center font-medium">
                  {activeItemData.label}
                </h3>
                <div className="w-8" />
              </SidebarHeader>

              <SidebarContent>
                <SidebarGroup>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      {activeItemData.subItems.map((subItem) => {
                        const SubIcon = subItem.icon;
                        const isSelected = selectedSubItem === subItem.id;

                        return (
                          <SidebarMenuItem key={subItem.id}>
                            <SidebarMenuButton
                              className="h-10 w-full px-3"
                              isActive={isSelected}
                              onClick={() => handleSubItemClick(subItem)}
                            >
                              <div className="flex min-w-0 flex-1 items-center gap-3">
                                <SubIcon className="h-4 w-4 shrink-0" />
                                <span className="truncate">
                                  {subItem.label}
                                </span>
                              </div>
                            </SidebarMenuButton>
                          </SidebarMenuItem>
                        );
                      })}
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </SidebarContent>
            </>
          )
        ) : (
          <>
            <SidebarHeader>
              <TeamSwitcher teams={data.teams} />
            </SidebarHeader>

            <SidebarContent>
              <SidebarGroup>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {sidebarItems.map((item) => {
                      const Icon = item.icon;
                      const chevronIndicator = (
                        <IconChevronRight className="h-4 w-4 shrink-0 transition-transform" />
                      );

                      return (
                        <SidebarMenuItem key={item.id}>
                          <SidebarMenuButton
                            className="h-10 w-full px-3"
                            onClick={() => handleItemClick(item)}
                          >
                            <div className="flex min-w-0 flex-1 items-center gap-3">
                              <Icon className="h-4 w-4 shrink-0" />
                              <span className="truncate">{item.label}</span>
                            </div>
                            <div className="ml-auto flex min-w-fit shrink-0 items-center gap-1">
                              {(item.badge || item.subItems) &&
                                (item.badge ? (
                                  <SidebarMenuBadge
                                    className={cn(
                                      'min-w-fit',
                                      item.subItems && 'gap-x-3'
                                    )}
                                  >
                                    {item.badge}
                                    {item.subItems && chevronIndicator}
                                  </SidebarMenuBadge>
                                ) : (
                                  chevronIndicator
                                ))}
                            </div>
                          </SidebarMenuButton>
                        </SidebarMenuItem>
                      );
                    })}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            </SidebarContent>

            <SidebarFooter>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton className="h-12 w-full px-3">
                    <div className="flex min-w-0 flex-1 items-center gap-3">
                      <Avatar className="h-8 w-8 rounded-full">
                        <AvatarImage alt="ephraim" src="/avatar-01.png" />
                        <AvatarFallback className="rounded-full">
                          E
                        </AvatarFallback>
                      </Avatar>
                      <div className="min-w-0 flex-1 text-left">
                        <div className="truncate font-medium text-sm">
                          ephraim
                        </div>
                        <div className="truncate text-muted-foreground text-xs">
                          ephraim@blocks.so
                        </div>
                      </div>
                    </div>
                    <IconLogout className="h-4 w-4 shrink-0" />
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarFooter>
          </>
        )}
      </Sidebar>
    </div>
  );
}
```