import { Avatar } from "@/components/catalyst/avatar"; import { Dropdown, DropdownButton, DropdownDivider, DropdownItem, DropdownLabel, DropdownMenu, } from "@/components/catalyst/dropdown"; import { Navbar, NavbarItem, NavbarSection, NavbarSpacer, } from "@/components/catalyst/navbar"; import { Sidebar, SidebarBody, SidebarFooter, SidebarHeader, SidebarHeading, SidebarItem, SidebarLabel, SidebarSection, SidebarSpacer, } from "@/components/catalyst/sidebar"; import { SidebarLayout } from "@/components/catalyst/sidebar-layout"; import { ArrowRightStartOnRectangleIcon, ChevronDownIcon, ChevronUpIcon, Cog8ToothIcon, LightBulbIcon, PlusIcon, ShieldCheckIcon, UserIcon, } from "@heroicons/react/16/solid"; import { Cog6ToothIcon, HomeIcon, InboxIcon, MagnifyingGlassIcon, MegaphoneIcon, QuestionMarkCircleIcon, SparklesIcon, Square2StackIcon, TicketIcon, } from "@heroicons/react/20/solid"; export default function Example() { return ( My profile Settings Privacy policy Share feedback Sign out } sidebar={ Tailwind Labs Settings Tailwind Labs Workcation New team… Search Inbox Home Events Orders Settings Broadcasts Upcoming Events Bear Hug: Live in Concert Viking People Six Fingers — DJ Set We All Look The Same Support Changelog Erica erica@example.com My profile Settings Privacy policy Share feedback Sign out } > {/* The page content */} ); }

00. Sidebar Layout

// Sidebar Layout

01. Basic Sidebar Layout

// Basic Sidebar Layout

Dashboard Overview