Components
Starting preview...
Sidebar
npx shadcn@latest add https://21st.dev/r/shadcn/sidebarimport {
Sidebar,
SidebarProvider,
SidebarContent,
SidebarGroup,
SidebarGroupLabel,
SidebarGroupContent,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
SidebarFooter,
SidebarTrigger,
} from "@/components/blocks/sidebar"
import {
User,
ChevronsUpDown,
Calendar,
Home,
Inbox,
Search,
Settings
} from "lucide-react"
// Menu items
const items = [
{
title: "Home",
url: "#",
icon: Home,
},
{
title: "Inbox",
url: "#",
icon: Inbox,
},
{
title: "Calendar",
url: "#",
icon: Calendar,
},
{
title: "Search",
url: "#",
icon: Search,
},
{
title: "Settings",
url: "#",
icon: Settings,
},
]
export function SidebarDemo() {
return (
<SidebarProvider>
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild tooltip={item.title}>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarGroup>
<SidebarMenuButton className="w-full justify-between gap-3 h-12">
<div className="flex items-center gap-2">
<User className="h-5 w-5 rounded-md" />
<div className="flex flex-col items-start">
<span className="text-sm font-medium">John Doe</span>
<span className="text-xs text-muted-foreground">john@example.com</span>
</div>
</div>
<ChevronsUpDown className="h-5 w-5 rounded-md" />
</SidebarMenuButton>
</SidebarGroup>
</SidebarFooter>
</Sidebar>
<main className="flex-1 min-w-100vh">
<div className="px-4 py-2">
<SidebarTrigger className="h-4 w-4 mt-2" />
</div>
<div className="p-6">
<h1 className="text-2xl font-bold">Main Content</h1>
<p className="mt-2">This is the main content area of the page.</p>
</div>
</main>
</SidebarProvider>
)
}