نوار کناری (Sidebar)

1import {
2  Sidebar,
3  SidebarContent,
4  SidebarGroup,
5  SidebarGroupContent,
6  SidebarGroupLabel,
7  SidebarInset,
8  SidebarMenu,
9  SidebarMenuButton,
10  SidebarMenuItem,
11  SidebarProvider,
12  SidebarTrigger,
13} from "@/components/ui/sidebar";
14import { Home, Settings, User } from "lucide-react";
15
16export default function SidebarBasicExample() {
17  return (
18    <SidebarProvider className="relative min-h-[420px] overflow-hidden rounded-lg border border-border">
19      <Sidebar
20        side="right"
21        collapsible="icon"
22        className="!absolute !inset-y-0"
23      >
24        <SidebarContent>
25          <SidebarGroup>
26            <SidebarGroupLabel>ناوبری</SidebarGroupLabel>
27            <SidebarGroupContent>
28              <SidebarMenu>
29                <SidebarMenuItem>
30                  <SidebarMenuButton tooltip="خانه">
31                    <Home />
32                    <span>خانه</span>
33                  </SidebarMenuButton>
34                </SidebarMenuItem>
35                <SidebarMenuItem>
36                  <SidebarMenuButton tooltip="پروفایل">
37                    <User />
38                    <span>پروفایل</span>
39                  </SidebarMenuButton>
40                </SidebarMenuItem>
41                <SidebarMenuItem>
42                  <SidebarMenuButton tooltip="تنظیمات">
43                    <Settings />
44                    <span>تنظیمات</span>
45                  </SidebarMenuButton>
46                </SidebarMenuItem>
47              </SidebarMenu>
48            </SidebarGroupContent>
49          </SidebarGroup>
50        </SidebarContent>
51      </Sidebar>
52      <SidebarInset className="p-4">
53        <div className="mb-4">
54          <SidebarTrigger />
55        </div>
56        <div className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
57          محتوای اصلی اینجاست.
58        </div>
59      </SidebarInset>
60    </SidebarProvider>
61  );
62}
63

1import * as React from "react";
2import {
3  Button,
4  Sidebar,
5  SidebarContent,
6  SidebarGroup,
7  SidebarGroupContent,
8  SidebarGroupLabel,
9  SidebarInset,
10  SidebarMenu,
11  SidebarMenuButton,
12  SidebarMenuItem,
13  SidebarProvider,
14} from "@/components/ui";
15import { Calendar, Mail, User } from "lucide-react";
16
17export default function SidebarControlledExample() {
18  const [open, setOpen] = React.useState(true);
19
20  return (
21    <SidebarProvider
22      open={open}
23      onOpenChange={setOpen}
24      className="relative min-h-[420px] overflow-hidden rounded-lg border border-border"
25    >
26      <Sidebar
27        side="right"
28        variant="inset"
29        collapsible="offcanvas"
30        className="!absolute !inset-y-0"
31      >
32        <SidebarContent>
33          <SidebarGroup>
34            <SidebarGroupLabel>پیام‌ها</SidebarGroupLabel>
35            <SidebarGroupContent>
36              <SidebarMenu>
37                <SidebarMenuItem>
38                  <SidebarMenuButton>
39                    <Mail />
40                    <span>صندوق ورودی</span>
41                  </SidebarMenuButton>
42                </SidebarMenuItem>
43                <SidebarMenuItem>
44                  <SidebarMenuButton>
45                    <Calendar />
46                    <span>تقویم</span>
47                  </SidebarMenuButton>
48                </SidebarMenuItem>
49                <SidebarMenuItem>
50                  <SidebarMenuButton>
51                    <User />
52                    <span>کاربران</span>
53                  </SidebarMenuButton>
54                </SidebarMenuItem>
55              </SidebarMenu>
56            </SidebarGroupContent>
57          </SidebarGroup>
58        </SidebarContent>
59      </Sidebar>
60      <SidebarInset className="p-4">
61        <Button
62          variant="outline"
63          onClick={() => setOpen((prev) => !prev)}
64          className="mb-4"
65        >
66          {open ? "بستن سایدبار" : "باز کردن سایدبار"}
67        </Button>
68        <div className="rounded-md border border-dashed border-border p-4 text-sm text-muted-foreground">
69          این نمونه وضعیت Sidebar را به‌صورت کنترل‌شده مدیریت می‌کند.
70        </div>
71      </SidebarInset>
72    </SidebarProvider>
73  );
74}
75