442 lines
12 KiB
TypeScript
442 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
BadgeCheck,
|
|
BarChart3,
|
|
Briefcase,
|
|
ChevronRight,
|
|
ChevronsUpDown,
|
|
ClipboardList,
|
|
Clock3,
|
|
FileText,
|
|
Folder,
|
|
Globe2,
|
|
HelpCircle,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
Settings,
|
|
Sparkles,
|
|
Star,
|
|
User,
|
|
Users,
|
|
} from "lucide-react";
|
|
import * as React from "react";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarInset,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
SidebarProvider,
|
|
SidebarRail,
|
|
SidebarTrigger,
|
|
} from "@/components/ui/sidebar";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// Base nav item - used by simple sidebars
|
|
type NavItem = {
|
|
label: string;
|
|
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
href: string;
|
|
isActive?: boolean;
|
|
// Optional children for submenus (Sidebar3+)
|
|
children?: NavItem[];
|
|
};
|
|
|
|
// Nav group with optional collapsible state
|
|
type NavGroup = {
|
|
title: string;
|
|
items: NavItem[];
|
|
// Optional: default collapsed state (Sidebar2+)
|
|
defaultOpen?: boolean;
|
|
};
|
|
|
|
// User data for footer (Sidebar6+)
|
|
type UserData = {
|
|
name: string;
|
|
email: string;
|
|
avatar: string;
|
|
};
|
|
|
|
// Complete sidebar data structure
|
|
type SidebarData = {
|
|
// Logo/branding (all sidebars)
|
|
logo: {
|
|
src: string;
|
|
alt: string;
|
|
title: string;
|
|
description: string;
|
|
};
|
|
// Main navigation groups (all sidebars)
|
|
navGroups: NavGroup[];
|
|
// Footer navigation group (all sidebars)
|
|
footerGroup: NavGroup;
|
|
// User data for user footer (Sidebar6+)
|
|
user?: UserData;
|
|
// Workspaces for switcher (Sidebar7+)
|
|
workspaces?: Array<{
|
|
id: string;
|
|
name: string;
|
|
logo: string;
|
|
plan: string;
|
|
}>;
|
|
// Currently active workspace (Sidebar7+)
|
|
activeWorkspace?: string;
|
|
};
|
|
|
|
// Shared sidebar data - works with all sidebar variations
|
|
const sidebarData: SidebarData = {
|
|
logo: {
|
|
src: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
|
|
alt: "شاد‌سی‌ان بلاکس",
|
|
title: "شاد‌سی‌ان بلاکس",
|
|
description: "اپلیکیشن خود را بسازید",
|
|
},
|
|
navGroups: [
|
|
{
|
|
title: "نمای کلی",
|
|
defaultOpen: true,
|
|
items: [
|
|
{
|
|
label: "داشبورد",
|
|
icon: LayoutDashboard,
|
|
href: "#",
|
|
isActive: true,
|
|
},
|
|
{ label: "وظایف", icon: ClipboardList, href: "#" },
|
|
{ label: "نقشه راه", icon: BarChart3, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "پروژه‌ها",
|
|
defaultOpen: true,
|
|
items: [
|
|
{
|
|
label: "پروژه‌های فعال",
|
|
icon: Briefcase,
|
|
href: "#",
|
|
children: [
|
|
{ label: "پروژه آلفا", icon: FileText, href: "#" },
|
|
{ label: "پروژه بتا", icon: FileText, href: "#" },
|
|
{ label: "پروژه گاما", icon: FileText, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
label: "بایگانی",
|
|
icon: Folder,
|
|
href: "#",
|
|
children: [
|
|
{ label: "بایگانی ۲۲۴", icon: FileText, href: "#" },
|
|
{ label: "بایگانی ۲۲۳", icon: FileText, href: "#" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "تیم",
|
|
defaultOpen: false,
|
|
items: [
|
|
{ label: "اعضا", icon: Users, href: "#" },
|
|
{ label: "اسپرینت‌ها", icon: Clock3, href: "#" },
|
|
{ label: "تأییدها", icon: BadgeCheck, href: "#" },
|
|
{ label: "بازبینی‌ها", icon: Star, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "فضای کار",
|
|
defaultOpen: false,
|
|
items: [
|
|
{ label: "یکپارچه‌سازی‌ها", icon: Globe2, href: "#" },
|
|
{ label: "خودکارسازی‌ها", icon: Sparkles, href: "#" },
|
|
],
|
|
},
|
|
],
|
|
footerGroup: {
|
|
title: "پشتیبانی",
|
|
items: [
|
|
{ label: "راهنمای کاربران", icon: HelpCircle, href: "#" },
|
|
{ label: "تنظیمات", icon: Settings, href: "#" },
|
|
],
|
|
},
|
|
user: {
|
|
name: "علی رضایی",
|
|
email: "ali@example.com",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|
},
|
|
workspaces: [
|
|
{
|
|
id: "1",
|
|
name: "شاد‌سی‌ان بلاکس",
|
|
logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
|
|
plan: "سازمانی",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "قالب‌های شاد‌سی‌ان",
|
|
logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
|
|
plan: "استارتاپ",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "کامپوننت‌های شاد‌سی‌ان",
|
|
logo: "/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg",
|
|
plan: "رایگان",
|
|
},
|
|
],
|
|
activeWorkspace: "1",
|
|
};
|
|
|
|
const getInitials = (name: string) =>
|
|
name
|
|
.split(" ")
|
|
.map((part) => part[0])
|
|
.join("");
|
|
|
|
const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton size="lg">
|
|
<div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
|
|
<img
|
|
src={logo.src}
|
|
alt={logo.alt}
|
|
className="size-6 text-primary-foreground invert dark:invert-0"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5 text-start leading-none">
|
|
<span className="font-medium">{logo.title}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{logo.description}
|
|
</span>
|
|
</div>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
);
|
|
};
|
|
|
|
const NavMenuItem = ({ item }: { item: NavItem }) => {
|
|
const Icon = item.icon;
|
|
const hasChildren = item.children && item.children.length > 0;
|
|
|
|
if (!hasChildren) {
|
|
return (
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
asChild
|
|
isActive={item.isActive}
|
|
tooltip={item.label}
|
|
>
|
|
<a href={item.href} className="text-start">
|
|
<Icon className="size-4" aria-hidden="true" />
|
|
<span>{item.label}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Collapsible asChild defaultOpen className="group/collapsible">
|
|
<SidebarMenuItem>
|
|
<CollapsibleTrigger asChild>
|
|
<SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
|
|
<Icon className="size-4" aria-hidden="true" />
|
|
<span>{item.label}</span>
|
|
<ChevronRight
|
|
className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
|
|
aria-hidden="true"
|
|
/>
|
|
</SidebarMenuButton>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
{item.children!.map((child) => (
|
|
<SidebarMenuSubItem key={child.label}>
|
|
<SidebarMenuSubButton asChild isActive={child.isActive}>
|
|
<a href={child.href} className="text-start">
|
|
{child.label}
|
|
</a>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
);
|
|
};
|
|
|
|
const NavUser = ({ user }: { user: UserData }) => {
|
|
const initials = getInitials(user.name);
|
|
|
|
const userAvatar = (
|
|
<Avatar className="size-8 rounded-lg">
|
|
<AvatarImage src={user.avatar} alt={user.name} />
|
|
<AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
|
|
const userInfo = (
|
|
<div className="grid flex-1 text-start text-sm leading-tight">
|
|
<span className="truncate font-medium">{user.name}</span>
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
>
|
|
{userAvatar}
|
|
{userInfo}
|
|
<ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
|
|
side="bottom"
|
|
align="start"
|
|
sideOffset={4}
|
|
>
|
|
<DropdownMenuLabel className="p-0 font-normal">
|
|
<div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
|
{userAvatar}
|
|
{userInfo}
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<User className="me-2 size-4" aria-hidden="true" />
|
|
حساب کاربری
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<LogOut className="me-2 size-4" aria-hidden="true" />
|
|
خروج
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
);
|
|
};
|
|
|
|
const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
|
|
return (
|
|
<Sidebar side="right" {...props}>
|
|
<SidebarHeader>
|
|
<SidebarLogo logo={sidebarData.logo} />
|
|
</SidebarHeader>
|
|
<SidebarContent className="overflow-hidden">
|
|
<ScrollArea className="min-h-0 flex-1">
|
|
{sidebarData.navGroups.map((group) => (
|
|
<SidebarGroup key={group.title}>
|
|
<SidebarGroupLabel>{group.title}</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{group.items.map((item) => (
|
|
<NavMenuItem key={item.label} item={item} />
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
))}
|
|
</ScrollArea>
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>{sidebarData.footerGroup.title}</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{sidebarData.footerGroup.items.map((item) => (
|
|
<NavMenuItem key={item.label} item={item} />
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
{sidebarData.user && <NavUser user={sidebarData.user} />}
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
);
|
|
};
|
|
|
|
interface ApplicationShell1Props {
|
|
className?: string;
|
|
}
|
|
|
|
export function ApplicationShell1({ className }: ApplicationShell1Props) {
|
|
return (
|
|
<SidebarProvider dir="rtl" lang="fa" className={cn(className)}>
|
|
<AppSidebar />
|
|
<SidebarInset dir="rtl" lang="fa">
|
|
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
<SidebarTrigger className="-ms-1" aria-label="باز و بسته کردن منو" />
|
|
<Separator
|
|
orientation="vertical"
|
|
className="ms-2 data-[orientation=vertical]:h-4"
|
|
/>
|
|
<Breadcrumb>
|
|
<BreadcrumbList className="text-start">
|
|
<BreadcrumbItem className="hidden md:block">
|
|
<BreadcrumbLink href="#">نمای کلی</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator className="hidden md:block [&>svg]:راست‌به‌چپ:rotate-180" />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>داشبورد</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</header>
|
|
<div className="flex flex-1 flex-col gap-4 p-4">
|
|
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|