Application Shell 3 - Top Navigation Bar Shell

1"use client";
2 
3import {
4  BadgeCheck,
5  BarChart3,
6  Briefcase,
7  ChevronDown,
8  ChevronsUpDown,
9  ClipboardList,
10  Clock3,
11  FileText,
12  Folder,
13  Globe2,
14  HelpCircle,
15  LayoutDashboard,
16  LogOut,
17  Menu,
18  Search,
19  Settings,
20  Sparkles,
21  Star,
22  User,
23  Users,
24} from "lucide-react";
25import * as React from "react";
26 
27import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
28import { Button } from "@/components/ui/button";
29import {
30  DropdownMenu,
31  DropdownMenuContent,
32  DropdownMenuItem,
33  DropdownMenuLabel,
34  DropdownMenuSeparator,
35  DropdownMenuTrigger,
36} from "@/components/ui/dropdown-menu";
37import { Input } from "@/components/ui/input";
38import { ScrollArea } from "@/components/ui/scroll-area";
39import { Separator } from "@/components/ui/separator";
40import {
41  Sheet,
42  SheetContent,
43  SheetHeader,
44  SheetTitle,
45  SheetTrigger,
46} from "@/components/ui/sheet";
47import { cn } from "@/lib/utils";
48 
49// Base nav item - used by simple sidebars
50type NavItem = {
51  label: string;
52  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
53  href: string;
54  isActive?: boolean;
55  // Optional children for submenus (Sidebar3+)
56  children?: NavItem[];
57};
58 
59// Nav group with optional collapsible state
60type NavGroup = {
61  title: string;
62  items: NavItem[];
63  // Optional: default collapsed state (Sidebar2+)
64  defaultOpen?: boolean;
65};
66 
67// User data for footer (Sidebar6+)
68type UserData = {
69  name: string;
70  email: string;
71  avatar: string;
72};
73 
74// Complete sidebar data structure
75type SidebarData = {
76  // Logo/branding (all sidebars)
77  logo: {
78    src: string;
79    alt: string;
80    title: string;
81    description: string;
82  };
83  // Main navigation groups (all sidebars)
84  navGroups: NavGroup[];
85  // Footer navigation group (all sidebars)
86  footerGroup: NavGroup;
87  // User data for user footer (Sidebar6+)
88  user?: UserData;
89  // Workspaces for switcher (Sidebar7+)
90  workspaces?: Array<{
91    id: string;
92    name: string;
93    logo: string;
94    plan: string;
95  }>;
96  // Currently active workspace (Sidebar7+)
97  activeWorkspace?: string;
98};
99 
100// Shared sidebar data - works with all sidebar variations
101const sidebarData: SidebarData = {
102  logo: {
103    src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblocks-logo.svg",
104    alt: "Shadcnblocks",
105    title: "Shadcnblocks",
106    description: "Build your app",
107  },
108  navGroups: [
109    {
110      title: "Overview",
111      defaultOpen: true,
112      items: [
113        {
114          label: "Dashboard",
115// … truncated