نوار کناری · بلوک‌های UI

app-sidebar.tsx

"use client"

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from "@/components/ui/sidebar"
import { IconPlaceholder } from "@/components/icon-placeholder"

const NAV = [
  { title: "نمای کلی", icon: "LayoutDashboardIcon", active: true },
  { title: "پروژه‌ها", icon: "FolderIcon" },
  { title: "پیام‌ها", icon: "MessageSquareIcon" },
  { title: "تقویم", icon: "CalendarIcon" },
  { title: "تنظیمات", icon: "SettingsIcon" },
] as const

const SECONDARY = [
  { title: "راهنما", icon: "LifeBuoyIcon" },
  { title: "بازخورد", icon: "SendIcon" },
] as const

export default function AppSidebar() {
  return (
    <Sidebar side="right" collapsible="offcanvas">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" render={<a href="#" />}>
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <IconPlaceholder
                  lucide="GalleryVerticalEndIcon"
                  className="size-4"
                />
              </div>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-semibold">FarsiUI</span>
                <span className="truncate text-xs text-muted-foreground">
                  سازمان
                </span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>منو</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {NAV.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    isActive={item.active}
                    tooltip={item.title}
                    render={<a href="#" />}
                  >
                    <IconPlaceholder lucide={item.icon} className="size-4" />
                    <span>{item.title}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup className="mt-auto">
          <SidebarGroupContent>
            <SidebarMenu>
              {SECONDARY.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton tooltip={item.title} render={<a href="#" />}>
                    <IconPlaceholder lucide={item.icon} className="size-4" />
                    <span>{item.title}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" render={<a href="#" />}>
              <div className="flex size-8 items-center justify-center rounded-lg bg-muted text-xs font-medium">
                مر
              </div>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-medium">مریم رضایی</span>
                <span className="truncate text-xs text-muted-foreground">
                  [email protected]
                </span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}

سایدبار متنی بدون آیکن

app-sidebar.tsx

"use client"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from "@/components/ui/sidebar"

const GROUPS = [
  {
    label: "شروع کار",
    items: [
      { title: "معرفی", active: true },
      { title: "نصب" },
      { title: "ساختار پروژه" },
    ],
  },
  {
    label: "راهنما",
    items: [
      { title: "کامپوننت‌ها" },
      { title: "تم و رنگ" },
      { title: "راست‌چین" },
      { title: "دسترسی‌پذیری" },
    ],
  },
  {
    label: "جامعه",
    items: [{ title: "نمونه‌ها" }, { title: "مشارکت" }, { title: "تغییرات" }],
  },
] as const

export default function AppSidebar() {
  return (
    <Sidebar side="right" collapsible="offcanvas">
      <SidebarHeader className="border-b px-4 py-3">
        <p className="text-sm font-semibold">مستندات</p>
        <p className="text-xs text-muted-foreground">بدون آیکن · متنی</p>
      </SidebarHeader>
      <SidebarContent>
        {GROUPS.map((group) => (
          <SidebarGroup key={group.label}>
            <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {group.items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      isActive={"active" in item && item.active}
                      render={<a href="#" />}
                    >
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}

منوی تو در تو با گروه‌های جمع‌شونده

app-sidebar.tsx

"use client"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/sidebar"
import { IconPlaceholder } from "@/components/icon-placeholder"

const NAV = [
  {
    title: "پلتفرم",
    icon: "SquareTerminalIcon",
    open: true,
    items: [
      { title: "نمای کلی", active: true },
      { title: "تحلیل" },
      { title: "گزارش‌ها" },
    ],
  },
  {
    title: "پروژه‌ها",
    icon: "FolderIcon",
    open: true,
    items: [
      { title: "فعال" },
      { title: "بایگانی" },
      {
        title: "تیم‌ها",
        items: [{ title: "طراحی" }, { title: "مهندسی" }, { title: "محصول" }],
      },
    ],
  },
  {
    title: "تنظیمات",
    icon: "Settings2Icon",
    open: false,
    items: [{ title: "عمومی" }, { title: "اعضا" }, { title: "صورتحساب" }],
  },
] as const

function NestedItems({
  items,
}: {
  items: readonly {
    title: string
    active?: boolean
    items?: readonly { title: string }[]
  }[]
}) {
  return (
    <SidebarMenuSub>
      {items.map((item) =>
        item.items ? (
          <Collapsible key={item.title} defaultOpen className="group/nested">
            <SidebarMenuSubItem>
              <CollapsibleTrigger
                render={<SidebarMenuSubButton className="w-full" />}
              >
                <span>{item.title}</span>
                <IconPlaceholder
                  lucide="ChevronDownIcon"
                  className="ms-auto size-3.5 opacity-60 transition-transform group-data-open/nested:rotate-180"
                />
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenuSub>
                  {item.items.map((child) => (
                    <SidebarMenuSubItem key={child.title}>
                      <SidebarMenuSubButton render={<a href="#" />}>
                        <span>{child.title}</span>
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  ))}
                </SidebarMenuSub>
              </CollapsibleContent>
            </SidebarMenuSubItem>
          </Collapsible>
        ) : (
          <SidebarMenuSubItem key={item.title}>
            <SidebarMenuSubButton
              isActive={item.active}
              render={<a href="#" />}
            >
              <span>{item.title}</span>
            </SidebarMenuSubButton>
          </SidebarMenuSubItem>
        )
      )}
    </SidebarMenuSub>
  )
}

export default function AppSidebar() {
  return (
    <Sidebar side="right" collapsible="offcanvas">
      <SidebarHeader className="border-b px-4 py-3">
        <p className="text-sm font-semibold">منوی تو در تو</p>
        <p className="text-xs text-muted-foreground">گروه‌های جمع‌شونده</p>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>ناوبری</SidebarGroupLabel>
          <SidebarMenu>
            {NAV.map((item) => (
              <Collapsible
                key={item.title}
                defaultOpen={item.open}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger
                    render={<SidebarMenuButton tooltip={item.title} />}
                  >
                    <IconPlaceholder lucide={item.icon} className="size-4" />
                    <span>{item.title}</span>
                    <IconPlaceholder
                      lucide="ChevronDownIcon"
                      className="ms-auto size-4 opacity-60 transition-transform group-data-open/collapsible:rotate-180"
                    />
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <NestedItems items={item.items} />
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}

سایدبار شناور با کشوی نرم Popover

app-sidebar.tsx

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from "@/components/ui/sidebar"
import { IconPlaceholder } from "@/components/icon-placeholder"

const MENUS = [
  {
    title: "فضای کاری",
    icon: "BriefcaseIcon",
    items: ["عمومی", "طراحی", "مهندسی", "بازاریابی"],
  },
  {
    title: "پروژه‌ها",
    icon: "FolderKanbanIcon",
    items: ["فعال", "در انتظار", "بایگانی"],
  },
  {
    title: "برچسب‌ها",
    icon: "TagsIcon",
    items: ["فوری", "باگ", "ویژگی", "مستندات"],
  },
] as const

const FLAT = [
  { title: "خانه", icon: "HomeIcon", active: true },
  { title: "جستجو", icon: "SearchIcon" },
  { title: "اعلان‌ها", icon: "BellIcon" },
] as const

function SoftMenu({
  title,
  icon,
  items,
}: {
  title: string
  icon: string
  items: readonly string[]
}) {
  const [open, setOpen] = React.useState(false)

  return (
    <SidebarMenuItem>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger
          render={
            <SidebarMenuButton
              tooltip={title}
              className="data-[state=open]:bg-sidebar-accent"
            />
          }
        >
          <IconPlaceholder lucide={icon} className="size-4" />
          <span>{title}</span>
          <IconPlaceholder
            lucide="ChevronLeftIcon"
            className="ms-auto size-4 opacity-60"
          />
        </PopoverTrigger>
        <PopoverContent
          side="left"
          align="start"
          sideOffset={8}
          className="w-48 p-1"
          dir="rtl"
        >
          <p className="px-2 py-1.5 text-xs text-muted-foreground">{title}</p>
          {items.map((item) => (
            <button
              key={item}
              type="button"
              className="flex w-full rounded-md px-2 py-1.5 text-sm hover:bg-muted"
              onClick={() => setOpen(false)}
            >
              {item}
            </button>
          ))}
        </PopoverContent>
      </Popover>
    </SidebarMenuItem>
  )
}

export default function AppSidebar() {
  return (
    <Sidebar side="right" variant="floating" collapsible="offcanvas">
      <SidebarHeader className="gap-2 border-b p-3">
        <div className="flex items-center justify-between gap-2 px-1">
          <div>
            <p className="text-sm font-semibold">کشویی نرم</p>
            <p className="text-xs text-muted-foreground">Popover زیرمنو</p>
          </div>
          <Button variant="ghost" size="icon-sm" aria-label="افزودن">
            <IconPlaceholder lucide="PlusIcon" className="size-4" />
          </Button>
        </div>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>اصلی</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {FLAT.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    isActive={"active" in item && item.active}
                    tooltip={item.title}
                    render={<a href="#" />}
                  >
                    <IconPlaceholder lucide={item.icon} className="size-4" />
                    <span>{item.title}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>با کشو</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {MENUS.map((menu) => (
                <SoftMenu key={menu.title} {...menu} />
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}

جمع‌شونده به نوار آیکن (inset)

app-sidebar.tsx

"use client"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/sidebar"
import { IconPlaceholder } from "@/components/icon-placeholder"

const NAV = [
  {
    title: "داشبورد",
    icon: "LayoutDashboardIcon",
    items: [{ title: "نمای کلی", active: true }, { title: "آمار" }],
  },
  {
    title: "فروشگاه",
    icon: "ShoppingBagIcon",
    items: [{ title: "محصولات" }, { title: "سفارش‌ها" }, { title: "مشتریان" }],
  },
  {
    title: "محتوا",
    icon: "FileTextIcon",
    items: [{ title: "نوشته‌ها" }, { title: "رسانه" }],
  },
] as const

const QUICK = [
  { title: "جستجو", icon: "SearchIcon" },
  { title: "تنظیمات", icon: "SettingsIcon" },
] as const

export default function AppSidebar() {
  return (
    <Sidebar side="right" collapsible="icon" variant="inset">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="FarsiUI" render={<a href="#" />}>
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <IconPlaceholder lucide="PanelsTopLeftIcon" className="size-4" />
              </div>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-semibold">FarsiUI</span>
                <span className="truncate text-xs text-muted-foreground">
                  جمع‌شونده
                </span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>منو</SidebarGroupLabel>
          <SidebarMenu>
            {NAV.map((item) => (
              <Collapsible
                key={item.title}
                defaultOpen={item.title === "داشبورد"}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger
                    render={<SidebarMenuButton tooltip={item.title} />}
                  >
                    <IconPlaceholder lucide={item.icon} className="size-4" />
                    <span>{item.title}</span>
                    <IconPlaceholder
                      lucide="ChevronDownIcon"
                      className="ms-auto size-4 opacity-60 transition-transform group-data-open/collapsible:rotate-180"
                    />
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items.map((sub) => (
                        <SidebarMenuSubItem key={sub.title}>
                          <SidebarMenuSubButton
                            isActive={"active" in sub && sub.active}
                            render={<a href="#" />}
                          >
                            <span>{sub.title}</span>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>

        <SidebarGroup className="mt-auto">
          <SidebarMenu>
            {QUICK.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton tooltip={item.title} render={<a href="#" />}>
                  <IconPlaceholder lucide={item.icon} className="size-4" />
                  <span>{item.title}</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="حساب کاربری" render={<a href="#" />}>
              <div className="flex size-8 items-center justify-center rounded-lg bg-muted text-xs font-medium">
                عل
              </div>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-medium">علی محمدی</span>
                <span className="truncate text-xs text-muted-foreground">
                  مدیر
                </span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}

سایدبار راست‌چین با منوی جمع‌شونده و حساب کاربری

app-sidebar.tsx

"use client"

import * as React from "react"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/sidebar"
import { IconPlaceholder } from "@/components/icon-placeholder"

const NAV = [
  {
    title: "عملیات",
    icon: "ActivityIcon",
    open: true,
    items: [
      { title: "صف", active: true },
      { title: "لاگ‌ها" },
      { title: "هشدارها" },
    ],
  },
  {
    title: "منابع",
    icon: "DatabaseIcon",
    open: false,
    items: [{ title: "پایگاه‌داده" }, { title: "کش" }, { title: "فایل‌ها" }],
  },
] as const

export default function AppSidebar() {
  const [userOpen, setUserOpen] = React.useState(false)

  return (
    <Sidebar side="right" collapsible="offcanvas" variant="sidebar">
      <SidebarHeader className="border-b px-3 py-3">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" render={<a href="#" />}>
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <IconPlaceholder lucide="OrbitIcon" className="size-4" />
              </div>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-semibold">کنسول</span>
                <span className="truncate text-xs text-muted-foreground">
                  سرویس‌ها
                </span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>سرویس‌ها</SidebarGroupLabel>
          <SidebarMenu>
            {NAV.map((item) => (
              <Collapsible
                key={item.title}
                defaultOpen={item.open}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger
                    render={<SidebarMenuButton tooltip={item.title} />}
                  >
                    <IconPlaceholder lucide={item.icon} className="size-4" />
                    <span>{item.title}</span>
                    <IconPlaceholder
                      lucide="ChevronDownIcon"
                      className="ms-auto size-4 opacity-60 transition-transform group-data-open/collapsible:rotate-180"
                    />
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items.map((sub) => (
                        <SidebarMenuSubItem key={sub.title}>
                          <SidebarMenuSubButton
                            isActive={"active" in sub && sub.active}
                            render={<a href="#" />}
                          >
                            <span>{sub.title}</span>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <Popover open={userOpen} onOpenChange={setUserOpen}>
              <PopoverTrigger
                render={
                  <SidebarMenuButton
                    size="lg"
                    className="data-[state=open]:bg-sidebar-accent"
                  />
                }
              >
                <div className="flex size-8 items-center justify-center rounded-lg bg-muted text-xs font-medium">
                  سا
                </div>
                <div className="grid flex-1 text-start text-sm leading-tight">
                  <span className="truncate font-medium">سارا کریمی</span>
                  <span className="truncate text-xs text-muted-foreground">
                    حساب
                  </span>
                </div>
                <IconPlaceholder
                  lucide="ChevronsUpDownIcon"
                  className="ms-auto size-4 opacity-60"
                />
              </PopoverTrigger>
              <PopoverContent
                side="top"
                align="start"
                className="w-56 p-1"
                dir="rtl"
              >
                <button
                  type="button"
                  className="flex w-full rounded-md px-2 py-1.5 text-start text-sm hover:bg-muted"
                  onClick={() => setUserOpen(false)}
                >
                  پروفایل
                </button>
                <button
                  type="button"
                  className="flex w-full rounded-md px-2 py-1.5 text-start text-sm hover:bg-muted"
                  onClick={() => setUserOpen(false)}
                >
                  تنظیمات
                </button>
                <button
                  type="button"
                  className="flex w-full rounded-md px-2 py-1.5 text-start text-sm text-destructive hover:bg-muted"
                  onClick={() => setUserOpen(false)}
                >
                  خروج
                </button>
              </PopoverContent>
            </Popover>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}