Application Shell 1 - Sidebar Shell with Breadcrumbs

1"use client";
2 
3import {
4  BadgeCheck,
5  BarChart3,
6  Briefcase,
7  ChevronRight,
8  ChevronsUpDown,
9  ClipboardList,
10  Clock3,
11  FileText,
12  Folder,
13  Globe2,
14  HelpCircle,
15  LayoutDashboard,
16  LogOut,
17  Settings,
18  Sparkles,
19  Star,
20  User,
21  Users,
22} from "lucide-react";
23import * as React from "react";
24 
25import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
26import {
27  Breadcrumb,
28  BreadcrumbItem,
29  BreadcrumbLink,
30  BreadcrumbList,
31  BreadcrumbPage,
32  BreadcrumbSeparator,
33} from "@/components/ui/breadcrumb";
34import {
35  Collapsible,
36  CollapsibleContent,
37  CollapsibleTrigger,
38} from "@/components/ui/collapsible";
39import {
40  DropdownMenu,
41  DropdownMenuContent,
42  DropdownMenuItem,
43  DropdownMenuLabel,
44  DropdownMenuSeparator,
45  DropdownMenuTrigger,
46} from "@/components/ui/dropdown-menu";
47import { ScrollArea } from "@/components/ui/scroll-area";
48import { Separator } from "@/components/ui/separator";
49import {
50  Sidebar,
51  SidebarContent,
52  SidebarFooter,
53  SidebarGroup,
54  SidebarGroupContent,
55  SidebarGroupLabel,
56  SidebarHeader,
57  SidebarInset,
58  SidebarMenu,
59  SidebarMenuButton,
60  SidebarMenuItem,
61  SidebarMenuSub,
62  SidebarMenuSubButton,
63  SidebarMenuSubItem,
64  SidebarProvider,
65  SidebarRail,
66  SidebarTrigger,
67} from "@/components/ui/sidebar";
68import { cn } from "@/lib/utils";
69 
70// Base nav item - used by simple sidebars
71type NavItem = {
72  label: string;
73  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
74  href: string;
75  isActive?: boolean;
76  // Optional children for submenus (Sidebar3+)
77  children?: NavItem[];
78};
79 
80// Nav group with optional collapsible state
81type NavGroup = {
82  title: string;
83  items: NavItem[];
84  // Optional: default collapsed state (Sidebar2+)
85  defaultOpen?: boolean;
86};
87 
88// User data for footer (Sidebar6+)
89type UserData = {
90  name: string;
91  email: string;
92  avatar: string;
93};
94 
95// Complete sidebar data structure
96type SidebarData = {
97  // Logo/branding (all sidebars)
98  logo: {
99    src: string;
100    alt: string;
101    title: string;
102    description: string;
103  };
104  // Main navigation groups (all sidebars)
105  navGroups: NavGroup[];
106  // Footer navigation group (all sidebars)
107  footerGroup: NavGroup;
108  // User data for user footer (Sidebar6+)
109  user?: UserData;
110  // Workspaces for switcher (Sidebar7+)
111  workspaces?: Array<{
112    id: string;
113    name: string;
114    logo: string;
115    plan: string;
116  }>;
117  // Currently active workspace (Sidebar7+)
118  activeWorkspace?: string;
119};
120 
121// … truncated