ناوبری فرعی (SecondaryNav)

معرفی

خانوادهٔ SecondaryNav پرایمیتیوهای محتوای پنل جانبی (Part 2) هستند — همتای پرتویی InnerSideMenu استودیوی Supabase. برای پرکردن AppSecondary ساخته شده‌اند: لینک‌های متنی، عنوان گروه، گروه‌های بازشونده و ورودی جستجو.

چه زمانی استفاده کنیم:

• محتوای فرعیِ ماندگار یک بخش (فهرست گزارش‌ها، فیلترها، ساب‌ناوبری) داخل AppSecondary، در قابی که هنوز به ProductFrame مهاجرت نکرده است (پیش از 4.0).
• می‌خواهید ظاهر و رفتار دقیقاً مثل پنل دوم استودیو باشد.

چه زمانی استفاده نکنیم:

• ناوبری اصلی سطح‌بالا → منوی ProductFrame (nav)، یک بار در layout ریشه.
• ساب‌ناوبری یک بخش در ProductFrame → سطح زیرمجموعهٔ همان منو (children مقصد در nav)؛ جست‌وجو و فیلترهای یک صفحهٔ فهرست → search و filters قالب ListPage (PageToolbar فقط درون یک CustomPage).
• درخت ناوبری عمومی صفحه → از NavTree استفاده کنید.
• فهرست/منوی شناور → از DropdownMenu یا Command استفاده کنید.

استفاده

import {
  AppSecondary,
  AppSecondaryHeader,
  AppSecondaryTitle,
  AppSecondaryContent,
  SecondaryNavItem,
  SecondaryNavTitle,
  SecondaryNavSeparator,
  SecondaryNavCollapsible,
  SecondaryNavCollapsibleTrigger,
  SecondaryNavCollapsibleContent,
  SecondaryNavSearchInput,
} from '@partodata/ui'
;<AppSecondary resizable>
  <AppSecondaryHeader>
    <AppSecondaryTitle>گزارش‌ها</AppSecondaryTitle>
  </AppSecondaryHeader>
  <AppSecondaryContent className="gap-1 p-2">
    <SecondaryNavSearchInput placeholder="جستجو…" aria-label="جستجو" />
    <SecondaryNavTitle>پیشنهادی</SecondaryNavTitle>
    <SecondaryNavItem isActive>نمای کلی هفتگی</SecondaryNavItem>
    <SecondaryNavItem>روند تعامل</SecondaryNavItem>
  </AppSecondaryContent>
</AppSecondary>

حالت‌ها و انواع

آیتم فعال و لینک

SecondaryNavItem با isActive حالت فعال می‌گیرد (bg-selection) و با asChild می‌تواند به یک لینک تبدیل شود:

<SecondaryNavItem asChild isActive>
  <Link href="/reports/weekly">نمای کلی هفتگی</Link>
</SecondaryNavItem>

آیکون، برچسب و شمارنده

محتوای آیتم از ابتدای سطر می‌آید: آیکون، و برچسب درست کنارش (justify-start gap-3) — در راست‌به‌چپ از راست. اندازهٔ آیکون را خود آیتم یکدست می‌کند (size-4، بدون جمع‌شدن). عنصر انتهایی اختیاری (شمارنده یا Badge) با ms-auto به انتهای سطر می‌رود. با asChild نشانه‌گذاری فرزند با شماست؛ برچسب را در <span className="min-w-0 truncate"> بگذارید تا عنوان بلند کوتاه شود.

<SecondaryNavItem asChild isActive>
  <Link href="/reports/weekly">
    <FileText />
    <span className="min-w-0 truncate">نمای کلی هفتگی</span>
    <Badge size="sm" className="ms-auto">12</Badge>
  </Link>
</SecondaryNavItem>

پیکان گروه بازشونده بسته که باشد به سمت خواندن (در راست‌به‌چپ به چپ) اشاره می‌کند و باز که باشد به پایین.

گروه بازشونده

<SecondaryNavCollapsible defaultOpen>
  <SecondaryNavCollapsibleTrigger title="ذخیره‌شده" />
  <SecondaryNavCollapsibleContent>
    <SecondaryNavItem>کمپین تخفیف فصلی</SecondaryNavItem>
    <SecondaryNavItem>بازخورد بسته‌بندی</SecondaryNavItem>
  </SecondaryNavCollapsibleContent>
</SecondaryNavCollapsible>

جستجو و جداکننده

<SecondaryNavSearchInput placeholder="جستجو…" aria-label="جستجو" isLoading={loading} />
<SecondaryNavSeparator />
<SecondaryNavTitle>عنوان گروه</SecondaryNavTitle>

راهنمای استفاده

جدول ویژگی‌ها

SecondaryNavItem

SecondaryNavCollapsibleTrigger

SecondaryNavSearchInput

SecondaryNavTitle و SecondaryNavSeparator بدون prop خاص‌اند (فقط className و فرزندان).

دسترسی‌پذیری

• SecondaryNavItem فعال: aria-current="page".
• SecondaryNavSeparator: role="separator".
• گروه بازشونده روی Collapsible رادیکس سوار است (کیبورد + aria-expanded).
• SecondaryNavSearchInput را همیشه با aria-label بدهید.

کامپوننت‌های مرتبط

• ظرف این پرایمیتیوها ← NavRail (AppSecondary). در ProductFrame پیوندهای هر بخش سطح زیرمجموعهٔ منو (children) هستند.
• برای ناوبری اصلی سطح‌بالا ← ProductFrame (nav، با children برای پیوندهای هر بخش).
• برای درخت ناوبری عمومی ← NavTree.