نوار کناری (Sidebar)

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader>
          <h2>برنامه من</h2>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>منوی اصلی</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton>داشبورد</SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton>پروژه‌ها</SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
          <p>نسخه 1.0.0</p>
        </SidebarFooter>
      </Sidebar>
      <main>
        <SidebarTrigger />
        {/* محتوای اصلی */}
      </main>
    </SidebarProvider>
  )
}

<SidebarProvider>
  <Sidebar collapsible="icon">{/* محتوا */}</Sidebar>
</SidebarProvider>

<Sidebar side="right">{/* محتوا */}</Sidebar>

{
  /* پیش‌فرض */
}
;<Sidebar variant="sidebar" />

{
  /* شناور */
}
;<Sidebar variant="floating" />

{
  /* داخلی */
}
;<Sidebar variant="inset" />

<SidebarMenuItem>
  <SidebarMenuButton tooltip="داشبورد">
    <Icons.home />
    <span>داشبورد</span>
  </SidebarMenuButton>
</SidebarMenuItem>

<SidebarMenuItem>
  <SidebarMenuButton>پروژه‌ها</SidebarMenuButton>
  <SidebarMenuSub>
    <SidebarMenuSubItem>
      <SidebarMenuSubButton>پروژه ۱</SidebarMenuSubButton>
    </SidebarMenuSubItem>
    <SidebarMenuSubItem>
      <SidebarMenuSubButton>پروژه ۲</SidebarMenuSubButton>
    </SidebarMenuSubItem>
  </SidebarMenuSub>
</SidebarMenuItem>

<SidebarMenuItem>
  <SidebarMenuButton>پیام‌ها</SidebarMenuButton>
  <SidebarMenuBadge>3</SidebarMenuBadge>
</SidebarMenuItem>

const [open, setOpen] = useState(true)

;<SidebarProvider open={open} onOpenChange={setOpen}>
  <Sidebar />
</SidebarProvider>

const { open, setOpen, state, isMobile, toggleSidebar } = useSidebar()