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

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from '@parto/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();