نوار ناوبری (NavRail)

import {
  NavRailProvider,
  NavRail,
  NavRailHeader,
  NavRailContent,
  NavRailItem,
  NavRailFooter,
  NavRailBehaviorToggle,
  AppLayout,
  AppLayoutContent,
} from '@partodata/ui'
import { LayoutDashboard, Search, Settings } from 'lucide-react'

export default function MyApp() {
  const [active, setActive] = React.useState('dashboard')

  return (
    <NavRailProvider side="start" defaultBehavior="expandable">
      <AppLayout>
        <NavRail>
          <NavRailHeader>
            <Logo />
          </NavRailHeader>
          <NavRailContent>
            <NavRailItem
              itemId="dashboard"
              icon={<LayoutDashboard />}
              label="داشبورد"
              isActive={active === 'dashboard'}
              onClick={() => setActive('dashboard')}
            />
            <NavRailItem
              itemId="search"
              icon={<Search />}
              label="جستجو"
              isActive={active === 'search'}
              onClick={() => setActive('search')}
            />
          </NavRailContent>
          <NavRailFooter>
            <NavRailItem itemId="settings" icon={<Settings />} label="تنظیمات" />
            <NavRailBehaviorToggle />
          </NavRailFooter>
        </NavRail>

        <AppLayoutContent>{/* محتوای صفحه */}</AppLayoutContent>
      </AppLayout>
    </NavRailProvider>
  )
}

<NavRailProvider defaultBehavior="open">{/* ... */}</NavRailProvider>

const [behavior, setBehavior] = React.useState<NavRailBehavior>('expandable')

<NavRailProvider behavior={behavior} onBehaviorChange={setBehavior}>
  {/* ... */}
</NavRailProvider>

<NavRailProvider>
  <AppLayout>
    <NavRail>{/* ... */}</NavRail>
    <AppSecondary resizable>
      <AppSecondaryHeader>
        <AppSecondaryTitle>گزارش‌ها</AppSecondaryTitle>
      </AppSecondaryHeader>
      <AppSecondaryContent className="p-2">
        <SecondaryNavSearchInput placeholder="جستجو…" aria-label="جستجو" />
        <SecondaryNavTitle>پیشنهادی</SecondaryNavTitle>
        <SecondaryNavItem isActive>نمای کلی هفتگی</SecondaryNavItem>
        <SecondaryNavItem>روند تعامل</SecondaryNavItem>
      </AppSecondaryContent>
    </AppSecondary>
    <AppLayoutContent>{/* محتوا */}</AppLayoutContent>
  </AppLayout>
</NavRailProvider>

<SiteHeaderStart>
  <NavRailTrigger />
  {/* عنوان */}
</SiteHeaderStart>