gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/sidebar.md

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 ( <> <SidebarMenuButton onClick={() => setIsOpen(!isOpen)} className="pl-lg"> <item.icon /> {item.title} {isOpen ? : } {isOpen && ( {item.items.map((subItem) => ( <subItem.icon /> {subItem.title} ))} )} </> ) }

GT

Ge's Team

Menu item1 Menu item2 Menu item3 {collapsibleItems.map((item) => ( ))}

SidebarMenuAction

Edit Project Delete Project

SidebarMenuBadge

24 ```