Sidebar

کامپوننت Sidebar قاب اصلی منوی کناری داشبورد است؛ شامل هدر (با عنوان و دکمه‌ی جمع‌کردن) و بدنه‌ی منو. محتوای خود منو (لینک‌ها و بخش‌ها) را با children خودت می‌سازی.

Import

import { Sidebar } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Sidebar title="پنل مدیریت" aria-label="منوی اصلی">
  <nav aria-label="ناوبری داشبورد">
    <a href="/dashboard">داشبورد</a>
    <a href="/reports">گزارش‌ها</a>
    <a href="/settings">تنظیمات</a>
  </nav>
</Sidebar>

Playground

title

collapsible

<Sidebar title="پنل مدیریت"
  collapsed={collapsed}
  onCollapsedChange={setCollapsed}>
  <nav>{/* لینک‌ها */}</nav>
</Sidebar>

Collapse

سایدبار حالت جمع‌شده دارد، اما کنترل آن با خودت است:

collapsed — وضعیت فعلی (جمع یا باز)
onCollapsedChange — با پاس‌دادن این prop، دکمه‌ی جمع‌کردن در هدر نمایش داده می‌شود

const [collapsed, setCollapsed] = useState(false);

<Sidebar title="پنل مدیریت" collapsed={collapsed} onCollapsedChange={setCollapsed}>
  <nav>{/* لینک‌ها */}</nav>
</Sidebar>;

اگر onCollapsedChange پاس نشود، سایدبار همیشه باز است و دکمه‌ی جمع‌کردن هم رندر نمی‌شود.

نکته‌ی RTL: در حالت جمع‌شده، عنوان مخفی می‌شود و دکمه‌ی جمع‌کردن سر جایش می‌ماند. اگر می‌خواهی هنگام جمع شدن عرضش هم انیمیت شود، transition را روی استایل خودت اعمال کن.

Sidebar خودش لینک‌ها، tooltip یا رفتار نمایش متن لینک‌ها در حالت جمع‌شده را مدیریت نمی‌کند. اگر در حالت collapsed فقط آیکون نمایش می‌دهی، برای هر لینک aria-label یا tooltip مناسب فراهم کن.

Accessibility

دکمه‌ی جمع‌کردن دارای aria-label مناسب («باز کردن منو» / «بستن منو») است.
کامپوننت با تگ معنایی <aside> رندر می‌شود.
برای تشخیص مقصد ناوبری، روی خود Sidebar یا nav یک aria-label بگذار؛ title صرفاً محتوای بصری header است.

Data Attributes and Customize CSS

Sidebar hookهای پایدار زیر را ارائه می‌کند:

Attribute	کاربرد
`data-fara-sidebar`	ریشه‌ی semantic از نوع `aside`
`data-collapsed`	روی ریشه در حالت جمع‌شده
`data-fara-sidebar-header`	ناحیه‌ی header
`data-fara-sidebar-header-content`	محتوای title؛ در حالت collapsed مخفی می‌شود
`data-fara-sidebar-toggle`	دکمه‌ی باز/بسته کردن
`data-fara-sidebar-body`	ناحیه‌ی children

<Sidebar
  className="dashboard-sidebar"
  title="پنل مدیریت"
  collapsed={collapsed}
  onCollapsedChange={setCollapsed}
>
  <nav aria-label="منوی داشبورد">{/* لینک‌ها */}</nav>
</Sidebar>

[data-fara-sidebar] {
  width: 260px;
  transition: width 180ms ease;
}

[data-fara-sidebar][data-collapsed] {
  width: 72px;
}

[data-fara-sidebar-header],
[data-fara-sidebar-body] {
  padding-inline: 12px;
}

[data-fara-sidebar-toggle] {
  cursor: pointer;
}

برای تغییر عرض هنگام جمع‌شدن، selector را روی ریشه‌ی [data-collapsed] بنویس؛ این attribute در حالت باز اصلاً وجود ندارد.

Props

Prop	Type	Default	Description
`title`	`ReactNode`	-	عنوان هدر سایدبار
`collapsed`	`boolean`	`false`	وضعیت جمع‌شده
`onCollapsedChange`	`(collapsed: boolean) => void`	-	با پاس‌دادن آن، دکمه‌ی جمع‌کردن فعال می‌شود
`className`	`string`	-	کلاس CSS اضافی برای سفارشی‌سازی
`ref`	`Ref<HTMLElement>`	-	دسترسی مستقیم به المان DOM

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <aside> نیز پشتیبانی می‌شوند.

Import​

Basic Usage​

Playground​

Collapse​

Accessibility​

Data Attributes and Customize CSS​

Props​