نوار کناری
sidebarکامپوننتناوبری اپ با گروهبندی، نشان شمارنده و بخشهای جمعشونده.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add sidebarنصب دستی
محتوای تب «کد» را در
components/ui/sidebar.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Sidebar, SidebarGroup, SidebarItem } from "@/components/ui/sidebar"23<Sidebar header={<Logo />}>4 <SidebarItem icon={Home} label="خانه" href="/" />5 <SidebarGroup title="فروشگاه" collapsible>6 <SidebarItem icon={ShoppingBag} label="سفارشها" badge={12} active />7 <SidebarItem icon={Package} label="محصولات" />8 </SidebarGroup>9</Sidebar>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| active | boolean | - | آیتم صفحهی فعلی با aria-current. |
| badge | number | string | - | شمارنده با ارقام فارسی. |
| collapsible | boolean | - | گروه باز و بسته شود. |