51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T3295,"use client"; import { BadgeCheck, BarChart3, Briefcase, ChevronRight, ChevronsUpDown, ClipboardList, Clock3, FileText, Folder, Globe2, HelpCircle, LayoutDashboard, LogOut, Settings, Sparkles, Star, User, Users, } from "lucide-react"; import * as React from "react"; import { cn } from "cn"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Separator } from "@/components/ui/separator"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, } from "@/components/ui/sidebar"; const person1 = { name: "Jack Walsh", firstName: "Jack", lastName: "Walsh", initials: "JW", email: "jack.walsh@example.com", username: "jackwalsh", role: "Product Designer", company: "Cartwright", location: "Brisbane, Australia", avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar1.webp", }; // Base nav item - used by simple sidebars type NavItem = { label: string; icon: React.ComponentType>; href: string; isActive?: boolean; // Optional children for submenus (Sidebar3+) children?: NavItem[]; }; // Nav group with optional collapsible state type NavGroup = { title: string; items: NavItem[]; // Optional: default collapsed state (Sidebar2+) defaultOpen?: boolean; }; // User data for footer (Sidebar6+) type UserData = { name: string; email: string; avatar: string; }; // Complete sidebar data structure type SidebarData = { // Logo/branding (all sidebars) logo: { src: string; alt: string; title: string; description: string; }; // Main navigation groups (all sidebars) navGroups: NavGroup[]; // Footer navigation group (all sidebars) footerGroup: NavGroup; // User data for user footer (Sidebar6+) user?: UserData; // Workspaces for switcher (Sidebar7+) workspaces?: Array<{ id: string; name: string; logo: string; plan: string; }>; // Currently active workspace (Sidebar7+) activeWorkspace?: string; }; // Shared sidebar data - works with all sidebar variations const sidebarData: SidebarData = { logo: { src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblocks-logo.svg", alt: "Shadcnblocks", title: "Shadcnblocks", description: "Build your app", }, navGroups: [ { title: "Overview", defaultOpen: true, items: [ { label: "Dashboard", icon: LayoutDashboard, href: "#", isActive: true, }, { label: "Tasks", icon: ClipboardList, href: "#" }, { label: "Roadmap", icon: BarChart3, href: "#" }, ], }, { title: "Projects", defaultOpen: true, items: [ { label: "Active Projects", icon: Briefcase, href: "#", children: [ { label: "Project Alpha", icon: FileText, href: "#" }, { label: "Project Beta", icon: FileText, href: "#" }, { label: "Project Gamma", icon: FileText, href: "#" }, ], }, { label: "Archived", icon: Folder, href: "#", children: [ { label: "2024 Archive", icon: FileText, href: "#" }, { label: "2023 Archive", icon: FileText, href: "#" }, ], }, ], }, { title: "Team", defaultOpen: false, items: [ { label: "Members", icon: Users, href: "#" }, { label: "Sprints", icon: Clock3, href: "#" }, { label: "Approvals", icon: BadgeCheck, href: "#" }, { label: "Reviews", icon: Star, href: "#" }, ], }, { title: "Workspace", defaultOpen: false, items: [ { label: "Integrations", icon: Globe2, href: "#" }, { label: "Automations", icon: Sparkles, href: "#" }, ], }, ], footerGroup: { title: "Support", items: [ { label: "Help Center", icon: HelpCircle, href: "#" }, { label: "Settings", icon: Settings, href: "#" }, ], }, user: { name: person1.name, email: person1.email, avatar: person1.avatar, }, workspaces: [ { id: "1", name: "Shadcnblocks", logo: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblocks-logo.svg", plan: "Enterprise", }, { id: "2", name: "Shadcn Templates", logo: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblocks-logo.svg", plan: "Startup", }, { id: "3", name: "Shadcn Components", logo: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblocks-logo.svg", plan: "Free", }, ], activeWorkspace: "1", }; const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => { return (

{logo.title} {logo.description}

); }; const NavMenuItem = ({ item }: { item: NavItem }) => { const Icon = item.icon; const hasChildren = item.children && item.children.length > 0; if (!hasChildren) { return ( {item.label} ); } return ( {item.label} {item.children!.map((child) => ( {child.label} ))} ); }; const NavUser = ({ user }: { user: UserData }) => { return ( {user.name .split(" ") .map((n) => n[0]) .join("")}

{user.name} {user.email}

{user.name .split(" ") .map((n) => n[0]) .join("")}

{user.name} {user.email}

Account Log out ); }; const AppSidebar = ({ ...props }: React.ComponentProps) => { return ( {sidebarData.navGroups.map((group) => ( {group.title} {group.items.map((item) => ( ))} ))} {sidebarData.user && } ); }; interface ApplicationShell1Props { className?: string; } export function ApplicationShell1({ className }: ApplicationShell1Props) { return (

{sidebarData.logo.title} Overview Dashboard

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L51",null,{"namespace":"@shadcnblocks","registryDependencies":["avatar","breadcrumb","collapsible","dropdown-menu","scroll-area","separator","sidebar"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"block/application-shell1/application-shell1.tsx","content":"$53","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]