shell کسبوکار RTL برای پنلهای DastRanj و VahedYek — سایدبار، مسیر صفحه و ناحیه محتوا در یک کامپوننت؛ presentation-only و data-driven.
import { TaavBusinessSidebar } from "@repo/ui/taav/business";breadcrumb مسیر کاربر بالای محتوا و همراستا با سایدبار داخل همان TaavBusinessSidebar رندر میشود. پیشفرض مسیر خانه است. آیتم آخر صفحه فعلی (bold) و بقیه لینک/دکمه بازگشت هستند.
نمونه تم روشن و تیره برای shell یکپارچه سایدبار + مسیر صفحه.
حالت کامل سایدبار دسترنج؛ مناسب زمانی که کاربر باید نام منوها، وضعیت tenant و اکشنهای سریع را همزمان ببیند. حالت کامل برای استفاده روزمره در پنل، با نمایش عنوان منوها و وضعیت tenant.
حالت بسته یا Collapsed؛ برای آزاد کردن فضای صفحه در پنلهای عملیاتی. در این حالت فقط آیکونها نمایش داده میشوند و توضیح هر آیتم از طریق tooltip یا aria-label در دسترس است. حالت فشرده برای زمانی که کاربر به فضای کاری بیشتری نیاز دارد؛ فقط آیکونها نمایش داده میشوند.
نمونه دادهمحور؛ نشان میدهد که سایدبار مالک route، tenant، auth یا permission نیست و فقط داده و handler از اپ دریافت میکند. آیتم فعال باید مسیر فعلی کاربر را نشان دهد و از خود کامپوننت route را تشخیص ندهد.
نمایش وضعیت tenant مانند active، loading، inactive و error بدون وارد کردن منطق tenant به خود کامپوننت. نمایش وضعیت tenant فقط نمایشی است؛ تغییر tenant و وضعیت واقعی از اپ اصلی پاس داده میشود.
اکشنهای سریع برای عملیات پرتکرار مثل خانه، اعلان، تنظیمات یا خروج استفاده میشوند.
فقط بخش منو اسکرول میشود؛ header، quick actions و bottom status ثابت میمانند. اسکرول باید مینیمال و کمجلبتوجه باشد. اسکرول فقط برای لیست منو است و باید بسیار مینیمال باشد تا تمرکز کاربر را نگیرد.
| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
navPath | TaavBusinessSidebarNavPathItem[] | [{ label: "خانه" }] | breadcrumb بالای محتوا — همراستا با سایدبار |
navPath[].label | string | — | برچسب هر سطح |
navPath[].href / onClick | string / fn | — | سطوح قبل از آخر قابل کلیک |
showNavPath | boolean | true | نمایش نوار مسیر |
children | ReactNode | — | محتوای اصلی صفحه (سمت چپ سایدبار در RTL) |
user | TaavBusinessSidebarUser | — | نام، subtitle، avatar |
tenant | TaavBusinessSidebarTenant | — | tenant name، label/slug، status |
items | TaavBusinessSidebarItem[] | — | آیتمهای منوی navigation |
quickActions | TaavBusinessSidebarQuickAction[] | — | میانبرهای toolbar |
activeItemId | string | — | شناسه آیتم فعال (از app) |
variant | 'dastranj' | 'default' | dastranj | تم بصری |
placement | 'left' | 'right' | right | لنگر فیزیکی سایدبار — DastRanj از right استفاده میکند |
width | 'compact' | 'default' | 'wide' | default | عرض expanded |
collapsed | boolean | — | حالت جمعشده controlled |
defaultCollapsed | boolean | false | حالت جمعشده uncontrolled |
collapsible | boolean | true | نمایش دکمه collapse/expand |
lockCollapsed | boolean | — | قفل collapsed و مخفی کردن toggle |
loading | boolean | — | placeholder loading برای user/tenant |
version | string | — | برچسب نسخه در footer |
onNavigate | (item) => void | — | کلیک آیتم منو |
onTenantSwitch | () => void | — | دکمه تغییر tenant |
onTenantPanelClick | () => void | — | کلیک پنل tenant پایین |
onLogout | () => void | — | handler خروج (fallback toolbar) |
onCollapsedChange | (collapsed: boolean) => void | — | تغییر collapse |