ناوبری

import {
  Sidebar,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from '@parto-system-design/ui'
import { LayoutDashboard, Users, BarChart2, Settings } from 'lucide-react'

<Sidebar>
  <SidebarGroup>
    <SidebarGroupLabel>اصلی</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="/dashboard" isActive={pathname === '/dashboard'}>
          <LayoutDashboard />
          <span>داشبورد</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
      <SidebarMenuItem>
        <SidebarMenuButton href="/influencers" isActive={pathname.startsWith('/influencers')}>
          <Users />
          <span>اینفلوئنسرها</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
      <SidebarMenuItem>
        <SidebarMenuButton href="/analytics" isActive={pathname.startsWith('/analytics')}>
          <BarChart2 />
          <span>تحلیل‌ها</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>

  <SidebarGroup>
    <SidebarGroupLabel>سیستم</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="/settings">
          <Settings />
          <span>تنظیمات</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</Sidebar>

<SidebarMenuButton
  href="/influencers"
  isActive={pathname.startsWith('/influencers')}
>
  <Users />
  <span>اینفلوئنسرها</span>
</SidebarMenuButton>

import { NavMenu, NavMenuItem } from '@parto-system-design/ui'

// پروفایل اینفلوئنسر — چند tab
<NavMenu>
  <NavMenuItem href="/influencer/123/overview" isActive={tab === 'overview'}>
    خلاصه
  </NavMenuItem>
  <NavMenuItem href="/influencer/123/posts" isActive={tab === 'posts'}>
    پست‌ها
  </NavMenuItem>
  <NavMenuItem href="/influencer/123/analytics" isActive={tab === 'analytics'}>
    تحلیل
  </NavMenuItem>
  <NavMenuItem href="/influencer/123/campaigns" isActive={tab === 'campaigns'}>
    کمپین‌ها
  </NavMenuItem>
</NavMenu>

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@parto-system-design/ui'

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/campaigns">کمپین‌ها</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/campaigns/summer-2024">تابستان ۱۴۰۳</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>اینفلوئنسرها</BreadcrumbPage>
  </BreadcrumbItem>
</Breadcrumb>

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from '@parto-system-design/ui'
import { User, Settings, LogOut } from 'lucide-react'

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="small">
      <Avatar src={user.avatar} />
      <span>{user.name}</span>
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem href="/profile">
      <User className="me-2 h-4 w-4" />
      پروفایل
    </DropdownMenuItem>
    <DropdownMenuItem href="/settings">
      <Settings className="me-2 h-4 w-4" />
      تنظیمات
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onClick={handleLogout} className="text-destructive">
      <LogOut className="me-2 h-4 w-4" />
      خروج از حساب
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '@parto-system-design/ui'

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href={`?page=${currentPage - 1}`} />
    </PaginationItem>
    {pages.map((page) => (
      <PaginationItem key={page}>
        <PaginationLink href={`?page=${page}`} isActive={page === currentPage}>
          {page}
        </PaginationLink>
      </PaginationItem>
    ))}
    <PaginationItem>
      <PaginationNext href={`?page=${currentPage + 1}`} />
    </PaginationItem>
  </PaginationContent>
</Pagination>

// با pathname از Next.js
const pathname = usePathname()

<SidebarMenuButton isActive={pathname === '/dashboard'}>
  داشبورد
</SidebarMenuButton>

// درست — آیکون + متن
<SidebarMenuButton>
  <LayoutDashboard aria-hidden="true" />
  <span>داشبورد</span>
</SidebarMenuButton>

// نادرست — آیکون تنها (بدون متن، بدون aria-label)
<SidebarMenuButton>
  <LayoutDashboard />
</SidebarMenuButton>

Sidebar (اصلی)
  └── NavMenu / Tabs (محلی)
         └── Breadcrumb (مکانی)