156 lines
4.5 KiB
Markdown
156 lines
4.5 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. Sidebar
|
|
|
|
# Sidebar
|
|
|
|
A composable, themeable and customizable sidebar component.
|
|
|
|
## Usage
|
|
|
|
Ge's Team - Documents
|
|
- Team
|
|
- Communication
|
|
- SidebarMenuAction
|
|
- SidebarMenuBadge24
|
|
|
|
Toggle Sidebar ```jsx
|
|
import { ChevronDown, ChevronRight, Folder, FileText, Users, Mail, Bell } from "lucide-react"
|
|
import { useState } from "react"
|
|
|
|
const collapsibleItems = [
|
|
{
|
|
title: "Documents",
|
|
icon: Folder,
|
|
items: [
|
|
{ title: "Reports", url: "#", icon: FileText },
|
|
{ title: "Invoices", url: "#", icon: FileText },
|
|
{ title: "Contracts", url: "#", icon: FileText },
|
|
],
|
|
},
|
|
{
|
|
title: "Team",
|
|
icon: Users,
|
|
items: [
|
|
{ title: "Members", url: "#", icon: Users },
|
|
{ title: "Roles", url: "#", icon: Users },
|
|
{ title: "Permissions", url: "#", icon: Users },
|
|
],
|
|
},
|
|
{
|
|
title: "Communication",
|
|
icon: Mail,
|
|
items: [
|
|
{ title: "Messages", url: "#", icon: Mail },
|
|
{ title: "Notifications", url: "#", icon: Bell },
|
|
{ title: "Announcements", url: "#", icon: Bell },
|
|
],
|
|
},
|
|
]
|
|
|
|
function CollapsibleMenuItem({ item }) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton onClick={() => setIsOpen(!isOpen)} className="pl-lg">
|
|
<item.icon />
|
|
<span>{item.title}</span>
|
|
{isOpen ? <ChevronDown className="ml-auto" /> : <ChevronRight className="ml-auto" />}
|
|
</SidebarMenuButton>
|
|
{isOpen && (
|
|
<SidebarMenuSub>
|
|
{item.items.map((subItem) => (
|
|
<SidebarMenuSubItem key={subItem.title}>
|
|
<SidebarMenuSubButton asChild>
|
|
<a href={subItem.url}>
|
|
<subItem.icon />
|
|
<span>{subItem.title}</span>
|
|
</a>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
</SidebarMenuSub>
|
|
)}
|
|
</SidebarMenuItem>
|
|
<SidebarSeparator />
|
|
</>
|
|
)
|
|
}
|
|
|
|
<SidebarProvider>
|
|
<Sidebar collapsible="offcanvas" className="relative">
|
|
<SidebarHeader>
|
|
<DropdownMenu className="w-full">
|
|
<DropdownMenuTrigger asChild>
|
|
<div className="flex items-center gap-md">
|
|
<Avatar>
|
|
<AvatarImage
|
|
src="https://github.com/shadcn.png"
|
|
alt="Team Avatar"
|
|
/>
|
|
<AvatarFallback>GT</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex items-center gap-sm">
|
|
Ge's Team
|
|
<ChevronDown size={16} />
|
|
</div>
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]">
|
|
<DropdownMenuItem>
|
|
<span>Menu item1</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<span>Menu item2</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<span>Menu item3</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarInput placeholder="Search for anything" />
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{collapsibleItems.map((item) => (
|
|
<CollapsibleMenuItem key={item.title} item={item} />
|
|
))}
|
|
<SidebarMenuItem>
|
|
<SidebarMenuSubButton asChild>
|
|
<div>SidebarMenuAction</div>
|
|
</SidebarMenuSubButton>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuAction>
|
|
<MoreHorizontal />
|
|
</SidebarMenuAction>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent side="right" align="start">
|
|
<DropdownMenuItem>
|
|
<span>Edit Project</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<span>Delete Project</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem className="group-data-[collapsible=icon]:hidden">
|
|
<SidebarMenuSubButton>
|
|
<div>SidebarMenuBadge</div>
|
|
</SidebarMenuSubButton>
|
|
<SidebarMenuBadge>24</SidebarMenuBadge>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
<SidebarTrigger />
|
|
</SidebarProvider>
|
|
``` |