4e: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/1o6_421saitt-.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"] 4f: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/1o6_421saitt-.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"] 50:T5bb,import { AppSidebar } from "@/components/app-sidebar"; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; import { Separator } from "@/components/ui/separator"; import { SidebarInset, SidebarProvider, SidebarTrigger, } from "@/components/ui/sidebar"; export default function Page() { return (

All Inboxes Inbox

{Array.from({ length: 24 }).map((_, index) => (

))}

); } 51:T1e8e,"use client"; import { ArchiveXIcon, FileIcon, InboxIcon, SendIcon, TerminalIcon, Trash2Icon, } from "lucide-react"; import * as React from "react"; import { NavUser } from "@/components/nav-user"; import { Label } from "@/components/ui/label"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar"; import { Switch } from "@/components/ui/switch"; // This is sample data const data = { user: { name: "Maqed", email: "maqed@example.com", avatar: "https://github.com/maqed.png", }, navMain: [ { title: "Inbox", url: "#", icon: , isActive: true, }, { title: "Drafts", url: "#", icon: , isActive: false, }, { title: "Sent", url: "#", icon: , isActive: false, }, { title: "Junk", url: "#", icon: , isActive: false, }, { title: "Trash", url: "#", icon: , isActive: false, }, ], mails: [ { name: "William Smith", email: "williamsmith@example.com", subject: "Meeting Tomorrow", date: "09:34 AM", teaser: "Hi team, just a reminder about our meeting tomorrow at 10 AM.\nPlease come prepared with your project updates.", }, { name: "Alice Smith", email: "alicesmith@example.com", subject: "Re: Project Update", date: "Yesterday", teaser: "Thanks for the update. The progress looks great so far.\nLet's schedule a call to discuss the next steps.", }, { name: "Bob Johnson", email: "bobjohnson@example.com", subject: "Weekend Plans", date: "2 days ago", teaser: "Hey everyone! I'm thinking of organizing a team outing this weekend.\nWould you be interested in a hiking trip or a beach day?", }, { name: "Emily Davis", email: "emilydavis@example.com", subject: "Re: Question about Budget", date: "2 days ago", teaser: "I've reviewed the budget numbers you sent over.\nCan we set up a quick call to discuss some potential adjustments?", }, { name: "Michael Wilson", email: "michaelwilson@example.com", subject: "Important Announcement", date: "1 week ago", teaser: "Please join us for an all-hands meeting this Friday at 3 PM.\nWe have some exciting news to share about the company's future.", }, { name: "Sarah Brown", email: "sarahbrown@example.com", subject: "Re: Feedback on Proposal", date: "1 week ago", teaser: "Thank you for sending over the proposal. I've reviewed it and have some thoughts.\nCould we schedule a meeting to discuss my feedback in detail?", }, { name: "David Lee", email: "davidlee@example.com", subject: "New Project Idea", date: "1 week ago", teaser: "I've been brainstorming and came up with an interesting project concept.\nDo you have time this week to discuss its potential impact and feasibility?", }, { name: "Olivia Wilson", email: "oliviawilson@example.com", subject: "Vacation Plans", date: "1 week ago", teaser: "Just a heads up that I'll be taking a two-week vacation next month.\nI'll make sure all my projects are up to date before I leave.", }, { name: "James Martin", email: "jamesmartin@example.com", subject: "Re: Conference Registration", date: "1 week ago", teaser: "I've completed the registration for the upcoming tech conference.\nLet me know if you need any additional information from my end.", }, { name: "Sophia White", email: "sophiawhite@example.com", subject: "Team Dinner", date: "1 week ago", teaser: "To celebrate our recent project success, I'd like to organize a team dinner.\nAre you available next Friday evening? Please let me know your preferences.", }, ], }; export function AppSidebar({ ...props }: React.ComponentProps) { // Note: I'm using state to show active item. // IRL you should use the url/router. const [activeItem, setActiveItem] = React.useState(data.navMain[0]); const [mails, setMails] = React.useState(data.mails); const { setOpen } = useSidebar(); return ( {/* This is the first sidebar */} {/* We disable collapsible and adjust width to icon. */} {/* This will make the sidebar appear as icons. */} } >

Acme Inc Enterprise

{data.navMain.map((item) => ( { setActiveItem(item); const mail = data.mails.sort(() => Math.random() - 0.5); setMails( mail.slice( 0, Math.max(5, Math.floor(Math.random() * 10) + 1), ), ); setOpen(true); }} isActive={activeItem?.title === item.title} className="px-2.5 md:px-2" > {item.icon} {item.title} ))} {/* This is the second sidebar */} {/* We disable collapsible and let it fill remaining space */}

{activeItem?.title}

Unreads

{mails.map((mail) => (

{mail.name}{" "} {mail.date}

{mail.subject} {mail.teaser} ))} ); } 52:Tb73,"use client"; import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon, } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage, } from "@/components/ui/avatar"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar, } from "@/components/ui/sidebar"; export function NavUser({ user, }: { user: { name: string; email: string; avatar: string; }; }) { const { isMobile } = useSidebar(); return ( } > CN

{user.name} {user.email}

Upgrade to Pro Account Billing Notifications Log out ); } 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@herocn","registryDependencies":["@herocn/sidebar","@herocn/breadcrumb","@herocn/separator","@herocn/collapsible","@herocn/dropdown-menu","@herocn/avatar","@herocn/switch","@herocn/label"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"page.tsx","content":"$50","type":"registry:page","target":"app/dashboard/page.tsx"},{"path":"components/app-sidebar.tsx","content":"$51","type":"registry:component","target":"components/app-sidebar.tsx"},{"path":"components/nav-user.tsx","content":"$52","type":"registry:component","target":"components/nav-user.tsx"}],"className":"h-[70svh] min-h-80"}]]}]