1075 lines
33 KiB
TypeScript
1075 lines
33 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import {
|
||
BadgeCheck,
|
||
Bell,
|
||
Bookmark,
|
||
ChevronDown,
|
||
ClipboardCheck,
|
||
Clock,
|
||
CreditCard,
|
||
FileText,
|
||
Folder,
|
||
Hash,
|
||
Inbox,
|
||
Layers,
|
||
LayoutGrid,
|
||
LogOut,
|
||
MessageSquare,
|
||
MessageSquareText,
|
||
MessagesSquare,
|
||
PhoneCall,
|
||
Pin,
|
||
Settings,
|
||
Sparkles,
|
||
UserPlus,
|
||
Users,
|
||
} from "lucide-react";
|
||
import * as React from "react";
|
||
|
||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import {
|
||
Breadcrumb,
|
||
BreadcrumbItem,
|
||
BreadcrumbLink,
|
||
BreadcrumbList,
|
||
BreadcrumbPage,
|
||
BreadcrumbSeparator,
|
||
} from "@/components/ui/breadcrumb";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Drawer,
|
||
DrawerContent,
|
||
DrawerHeader,
|
||
DrawerTitle,
|
||
} from "@/components/ui/drawer";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuGroup,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuPortal,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuShortcut,
|
||
DropdownMenuSub,
|
||
DropdownMenuSubContent,
|
||
DropdownMenuSubTrigger,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
import {
|
||
Sheet,
|
||
SheetContent,
|
||
SheetHeader,
|
||
SheetTitle,
|
||
SheetTrigger,
|
||
} from "@/components/ui/sheet";
|
||
import {
|
||
Sidebar,
|
||
SidebarContent,
|
||
SidebarFooter,
|
||
SidebarGroup,
|
||
SidebarGroupContent,
|
||
SidebarGroupLabel,
|
||
SidebarHeader,
|
||
SidebarInset,
|
||
SidebarMenu,
|
||
SidebarMenuBadge,
|
||
SidebarMenuButton,
|
||
SidebarMenuItem,
|
||
SidebarProvider,
|
||
SidebarTrigger,
|
||
useSidebar,
|
||
} from "@/components/ui/sidebar";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
type ModuleId = "messages" | "spaces" | "threads" | "calls" | "files";
|
||
|
||
type NavItem = {
|
||
label: string;
|
||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||
href: string;
|
||
badge?: string;
|
||
active?: boolean;
|
||
};
|
||
|
||
type NavSection = {
|
||
title?: string;
|
||
items: NavItem[];
|
||
};
|
||
|
||
type NavModule = {
|
||
id: ModuleId;
|
||
label: string;
|
||
icon: NavItem["icon"];
|
||
sections: NavSection[];
|
||
};
|
||
|
||
function getItemKey(moduleId: ModuleId, item: NavItem) {
|
||
return `${moduleId}:${item.label}`;
|
||
}
|
||
|
||
function getDefaultItemKey(module: NavModule) {
|
||
const items = module.sections.flatMap((section) => section.items);
|
||
const activeItem = items.find((item) => item.active) ?? items[0];
|
||
return activeItem ? getItemKey(module.id, activeItem) : `${module.id}:`;
|
||
}
|
||
|
||
function getActiveItemLabel(module: NavModule, activeItemKey: string) {
|
||
const items = module.sections.flatMap((section) => section.items);
|
||
const match = items.find(
|
||
(item) => getItemKey(module.id, item) === activeItemKey,
|
||
);
|
||
return match?.label ?? module.sections[0]?.items[0]?.label ?? module.label;
|
||
}
|
||
|
||
function getInitials(name: string) {
|
||
return (
|
||
name
|
||
.split(" ")
|
||
.filter(Boolean)
|
||
.slice(0, 2)
|
||
.map((part) => part[0]?.toUpperCase())
|
||
.join("") || "U"
|
||
);
|
||
}
|
||
|
||
const navModules: NavModule[] = [
|
||
{
|
||
id: "messages",
|
||
label: "پیام‌ها",
|
||
icon: MessagesSquare,
|
||
sections: [
|
||
{
|
||
title: "صندوق ورودی",
|
||
items: [
|
||
{ label: "همه پیام‌ها", icon: Inbox, href: "#", active: true },
|
||
{ label: "ارجاع‌ها", icon: UserPlus, href: "#", badge: "۴" },
|
||
{ label: "اعلان‌ها", icon: Bell, href: "#", badge: "۱۲" },
|
||
{ label: "ذخیره‌شده", icon: Bookmark, href: "#" },
|
||
],
|
||
},
|
||
{
|
||
title: "نماها",
|
||
items: [
|
||
{ label: "خوانده‌نشده", icon: Bell, href: "#" },
|
||
{ label: "زمان‌بندی‌شده", icon: Clock, href: "#" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "spaces",
|
||
label: "فضاها",
|
||
icon: LayoutGrid,
|
||
sections: [
|
||
{
|
||
title: "فضاها",
|
||
items: [
|
||
{ label: "به‌روزرسانی محصول", icon: Hash, href: "#", active: true },
|
||
{ label: "موفقیت مشتری", icon: Users, href: "#", badge: "۲" },
|
||
{ label: "عملیات انتشار", icon: Layers, href: "#" },
|
||
],
|
||
},
|
||
{
|
||
title: "مستقیم",
|
||
items: [
|
||
{ label: "Kai", icon: Users, href: "#", badge: "۱" },
|
||
{ label: "Mina", icon: Users, href: "#" },
|
||
{ label: "Diego", icon: Users, href: "#" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "threads",
|
||
label: "گفتگوها",
|
||
icon: MessageSquareText,
|
||
sections: [
|
||
{
|
||
title: "گفتگوها",
|
||
items: [
|
||
{ label: "دنبال‌شده", icon: Bookmark, href: "#", active: true },
|
||
{ label: "محول‌شده", icon: Users, href: "#" },
|
||
{ label: "بسته‌شده", icon: MessageSquareText, href: "#" },
|
||
],
|
||
},
|
||
{
|
||
title: "برجسته‌ها",
|
||
items: [
|
||
{ label: "ارجاع‌ها", icon: UserPlus, href: "#", badge: "۳" },
|
||
{ label: "سنجاق‌شده", icon: Bookmark, href: "#" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "calls",
|
||
label: "تماس‌ها",
|
||
icon: PhoneCall,
|
||
sections: [
|
||
{
|
||
title: "جلسات",
|
||
items: [
|
||
{ label: "پیش‌رو", icon: Clock, href: "#", active: true },
|
||
{ label: "ضبط‌ها", icon: FileText, href: "#" },
|
||
],
|
||
},
|
||
{
|
||
title: "دستگاه‌ها",
|
||
items: [
|
||
{ label: "صدا و تصویر", icon: PhoneCall, href: "#" },
|
||
{ label: "اعلان‌ها", icon: Bell, href: "#" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "files",
|
||
label: "فایل‌ها",
|
||
icon: Folder,
|
||
sections: [
|
||
{
|
||
title: "مرور",
|
||
items: [
|
||
{ label: "اخیر", icon: Clock, href: "#", active: true },
|
||
{ label: "اشتراکی با من", icon: Users, href: "#" },
|
||
{ label: "بارگذاری‌ها", icon: Folder, href: "#" },
|
||
{ label: "مجموعه‌ها", icon: Layers, href: "#" },
|
||
],
|
||
},
|
||
{
|
||
title: "فیلترهای سریع",
|
||
items: [
|
||
{ label: "اسناد", icon: FileText, href: "#" },
|
||
{ label: "نظرات خوانده‌نشده", icon: Bell, href: "#", badge: "۵" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
const utilities: NavItem[] = [
|
||
{ label: "اعلان‌ها", icon: Bell, href: "#" },
|
||
{ label: "تنظیمات", icon: Settings, href: "#" },
|
||
];
|
||
|
||
const data = {
|
||
user: {
|
||
name: "علی رضایی",
|
||
email: "ali@example.com",
|
||
avatar:
|
||
"/block-media/shadcnblocks/block/avatar/avatar3.webp",
|
||
},
|
||
participants: [
|
||
{
|
||
id: "you",
|
||
name: "علی رضایی",
|
||
title: "شما",
|
||
status: "online",
|
||
},
|
||
{
|
||
id: "riley",
|
||
name: "ریحانه Park",
|
||
title: "محصول",
|
||
status: "online",
|
||
},
|
||
{
|
||
id: "sam",
|
||
name: "Sam Rivera",
|
||
title: "طراحی",
|
||
status: "away",
|
||
},
|
||
{
|
||
id: "noah",
|
||
name: "Noah Patel",
|
||
title: "مهندسی",
|
||
status: "offline",
|
||
},
|
||
{
|
||
id: "maya",
|
||
name: "نگار Singh",
|
||
title: "پشتیبانی",
|
||
status: "online",
|
||
},
|
||
{
|
||
id: "jules",
|
||
name: "Jules Tan",
|
||
title: "عملیات",
|
||
status: "offline",
|
||
},
|
||
] as const,
|
||
activity: [
|
||
{
|
||
id: "a1",
|
||
icon: MessageSquare,
|
||
title: "گفتگوی جدید شروع شد",
|
||
detail: "Riley در به‌روزرسانی محصول پست گذاشت.",
|
||
time: "۲ دقیقه",
|
||
},
|
||
{
|
||
id: "a2",
|
||
icon: UserPlus,
|
||
title: "ارجاع جدید",
|
||
detail: "سام شما را به تیکت پشتیبانی مشتری ارجاع داد.",
|
||
time: "۱۸ دقیقه",
|
||
},
|
||
{
|
||
id: "a3",
|
||
icon: Pin,
|
||
title: "پیام سنجاق شد",
|
||
detail: "Maya «چک‌لیست انتشار نسخه ۳» را سنجاق کرد.",
|
||
time: "۱ ساعت",
|
||
},
|
||
{
|
||
id: "a4",
|
||
icon: ClipboardCheck,
|
||
title: "وظیفه تکمیل شد",
|
||
detail: "Noah «پاکسازی API» را انجام‌شده علامت زد.",
|
||
time: "امروز",
|
||
},
|
||
{
|
||
id: "a5",
|
||
icon: PhoneCall,
|
||
title: "تماس پایان یافت",
|
||
detail: "همگام‌سازی هفتگی • ۲۴ دقیقه",
|
||
time: "دیروز",
|
||
},
|
||
{
|
||
id: "a6",
|
||
icon: FileText,
|
||
title: "فایل بارگذاری شد",
|
||
detail: "Jules «incident-notes.pdf» را به اشتراک گذاشت.",
|
||
time: "دیروز",
|
||
},
|
||
] as const,
|
||
};
|
||
|
||
interface ShellBreadcrumbProps {
|
||
className?: string;
|
||
moduleLabel: string;
|
||
itemLabel: string;
|
||
}
|
||
|
||
function ShellBreadcrumb({
|
||
className,
|
||
moduleLabel,
|
||
itemLabel,
|
||
}: ShellBreadcrumbProps) {
|
||
return (
|
||
<Breadcrumb className={cn(className)}>
|
||
<BreadcrumbList>
|
||
<BreadcrumbItem className="hidden md:block">
|
||
<BreadcrumbLink href="#">{moduleLabel}</BreadcrumbLink>
|
||
</BreadcrumbItem>
|
||
<BreadcrumbSeparator className="hidden md:block" />
|
||
<BreadcrumbItem>
|
||
<BreadcrumbPage>{itemLabel}</BreadcrumbPage>
|
||
</BreadcrumbItem>
|
||
</BreadcrumbList>
|
||
</Breadcrumb>
|
||
);
|
||
}
|
||
|
||
interface ModulePanelProps {
|
||
className?: string;
|
||
module: NavModule;
|
||
activeItemKey: string;
|
||
onSelectItem: (key: string) => void;
|
||
}
|
||
|
||
function ModulePanel({
|
||
className,
|
||
module,
|
||
activeItemKey,
|
||
onSelectItem,
|
||
}: ModulePanelProps) {
|
||
return (
|
||
<div className={cn("space-y-4 px-4 py-3 text-start text-sm", className)}>
|
||
{module.sections.map((section, index) => (
|
||
<div className="space-y-2" key={section.title ?? index}>
|
||
{section.title && (
|
||
<SidebarGroupLabel className="mb-1 text-xs font-medium tracking-wide text-muted-foreground">
|
||
{section.title}
|
||
</SidebarGroupLabel>
|
||
)}
|
||
<SidebarMenu>
|
||
{section.items.map((item) => {
|
||
const Icon = item.icon;
|
||
const itemKey = getItemKey(module.id, item);
|
||
return (
|
||
<SidebarMenuItem
|
||
key={item.label}
|
||
className="text-muted-foreground hover:text-foreground"
|
||
>
|
||
<SidebarMenuButton
|
||
asChild
|
||
isActive={itemKey === activeItemKey}
|
||
className="px-2"
|
||
>
|
||
<a
|
||
href={item.href}
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
onSelectItem(itemKey);
|
||
}}
|
||
>
|
||
<Icon className="size-4" />
|
||
{item.badge && (
|
||
<SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
|
||
)}
|
||
<span>{item.label}</span>
|
||
</a>
|
||
</SidebarMenuButton>
|
||
</SidebarMenuItem>
|
||
);
|
||
})}
|
||
</SidebarMenu>
|
||
</div>
|
||
))}
|
||
|
||
<div className="border-t pt-3">
|
||
<SidebarGroupLabel className="mb-2 text-xs font-medium tracking-wide text-muted-foreground">
|
||
ترجیحات
|
||
</SidebarGroupLabel>
|
||
<SidebarMenu className="text-sm">
|
||
{utilities.map((item) => {
|
||
const Icon = item.icon;
|
||
return (
|
||
<SidebarMenuItem key={item.label}>
|
||
<SidebarMenuButton
|
||
asChild
|
||
className="gap-2.5 px-2 text-muted-foreground hover:text-foreground"
|
||
>
|
||
<a href={item.href}>
|
||
<Icon className="size-4" />
|
||
<span>{item.label}</span>
|
||
</a>
|
||
</SidebarMenuButton>
|
||
</SidebarMenuItem>
|
||
);
|
||
})}
|
||
</SidebarMenu>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface AppSidebarProps extends Omit<
|
||
React.ComponentProps<typeof Sidebar>,
|
||
"className"
|
||
> {
|
||
className?: string;
|
||
activeKey: ModuleId;
|
||
activeItemKey: string;
|
||
onNavChange: (key: ModuleId) => void;
|
||
onItemChange: (key: string) => void;
|
||
}
|
||
|
||
function AppSidebar({
|
||
className,
|
||
activeKey,
|
||
activeItemKey,
|
||
onNavChange,
|
||
onItemChange,
|
||
...props
|
||
}: AppSidebarProps) {
|
||
const { state, setOpen, isMobile } = useSidebar();
|
||
const isCollapsed = state === "collapsed";
|
||
const showFooter = isCollapsed || isMobile;
|
||
|
||
const activeModule =
|
||
navModules.find((module) => module.id === activeKey) ?? navModules[0];
|
||
|
||
return (
|
||
<Sidebar
|
||
side="right"
|
||
collapsible="icon"
|
||
className={cn(
|
||
"overflow-hidden *:data-[sidebar=sidebar]:flex-row",
|
||
className,
|
||
)}
|
||
{...props}
|
||
>
|
||
<Sidebar
|
||
collapsible="none"
|
||
className="w-[calc(var(--sidebar-width-icon)+1px)]! border-e"
|
||
>
|
||
<SidebarHeader className="h-14 border-b">
|
||
<SidebarMenu className="my-auto">
|
||
<SidebarMenuItem>
|
||
<SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
|
||
<a href="#">
|
||
<div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/NovaSales-logo.svg"
|
||
alt="شاد‌سی‌ان بلاکس"
|
||
className="size-6 text-primary-foreground invert dark:invert-0"
|
||
/>
|
||
</div>
|
||
<span className="text-lg font-semibold tracking-tighter">
|
||
ری یو آی
|
||
</span>
|
||
</a>
|
||
</SidebarMenuButton>
|
||
</SidebarMenuItem>
|
||
</SidebarMenu>
|
||
</SidebarHeader>
|
||
|
||
<SidebarContent>
|
||
<SidebarGroup>
|
||
<SidebarGroupContent className="px-1.5 md:px-0">
|
||
<SidebarMenu>
|
||
{" "}
|
||
<SidebarMenuItem>
|
||
<motion.div
|
||
key={isCollapsed ? "h-collapsed" : "h-expanded"}
|
||
className={cn(
|
||
isCollapsed
|
||
? "hidden items-center justify-center sm:flex"
|
||
: "hidden",
|
||
)}
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<SidebarTrigger />
|
||
</motion.div>
|
||
</SidebarMenuItem>
|
||
{navModules.map((module) => {
|
||
const Icon = module.icon;
|
||
return (
|
||
<SidebarMenuItem key={module.id}>
|
||
<SidebarMenuButton
|
||
tooltip={{
|
||
children: module.label,
|
||
hidden: isMobile,
|
||
}}
|
||
onClick={() => {
|
||
onNavChange(module.id);
|
||
setOpen(true);
|
||
}}
|
||
isActive={activeKey === module.id}
|
||
aria-label={module.label}
|
||
className="px-2.5 md:px-2"
|
||
>
|
||
<Icon className="size-4" />
|
||
<span>{module.label}</span>
|
||
</SidebarMenuButton>
|
||
</SidebarMenuItem>
|
||
);
|
||
})}
|
||
</SidebarMenu>
|
||
</SidebarGroupContent>
|
||
</SidebarGroup>
|
||
</SidebarContent>
|
||
|
||
<SidebarFooter className={cn(showFooter ? "flex" : "hidden")}>
|
||
<SidebarGroup className="p-0">
|
||
<SidebarGroupContent className="px-1.5 md:px-0">
|
||
<SidebarMenu>
|
||
{utilities.map((item) => {
|
||
const Icon = item.icon;
|
||
return (
|
||
<SidebarMenuItem key={item.label}>
|
||
<SidebarMenuButton
|
||
asChild
|
||
tooltip={{
|
||
children: item.label,
|
||
hidden: isMobile,
|
||
}}
|
||
className="px-2.5 md:px-2"
|
||
aria-label={item.label}
|
||
>
|
||
<a href={item.href}>
|
||
<Icon className="size-4" />
|
||
<span>{item.label}</span>
|
||
</a>
|
||
</SidebarMenuButton>
|
||
</SidebarMenuItem>
|
||
);
|
||
})}
|
||
</SidebarMenu>{" "}
|
||
</SidebarGroupContent>
|
||
</SidebarGroup>
|
||
</SidebarFooter>
|
||
</Sidebar>
|
||
|
||
<Sidebar collapsible="none" className="hidden flex-1 md:flex">
|
||
<SidebarHeader
|
||
className={cn(
|
||
"flex h-14 border-b px-2",
|
||
isCollapsed
|
||
? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-center md:justify-start"
|
||
: "flex-row items-center justify-between",
|
||
)}
|
||
>
|
||
<SidebarMenu>
|
||
<SidebarMenuItem>
|
||
<DropdownMenu>
|
||
<div className="flex w-full items-center px-2 group-data-[collapsible=icon]:justify-center">
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
className="flex h-auto items-center gap-1.5 p-0! hover:bg-transparent"
|
||
>
|
||
<span className="font-semibold">ری یو آی</span>
|
||
<ChevronDown className="size-3 text-muted-foreground" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
</div>
|
||
<DropdownMenuContent
|
||
className="min-w-60 rounded-lg"
|
||
side="bottom"
|
||
align="center"
|
||
>
|
||
<DropdownMenuGroup>
|
||
<DropdownMenuItem asChild>
|
||
<a href="#">
|
||
تنظیمات فضای کار
|
||
<DropdownMenuShortcut>⌥⇧S</DropdownMenuShortcut>
|
||
</a>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSub>
|
||
<DropdownMenuSubTrigger>
|
||
دعوت هم‌تیمی‌ها
|
||
</DropdownMenuSubTrigger>
|
||
<DropdownMenuPortal>
|
||
<DropdownMenuSubContent className="min-w-64 rounded-lg">
|
||
<DropdownMenuLabel>دعوت به Pulse</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem className="flex items-center gap-2">
|
||
<div className="flex aspect-square size-6 items-center justify-center rounded bg-blue-500 text-[10px] font-semibold text-white">
|
||
EM
|
||
</div>
|
||
دعوت با ایمیل
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem className="flex items-center gap-2">
|
||
<div className="flex aspect-square size-6 items-center justify-center rounded bg-emerald-500 text-[10px] font-semibold text-white">
|
||
LK
|
||
</div>
|
||
کپی لینک دعوت
|
||
<DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem>دعوت‌های در انتظار</DropdownMenuItem>
|
||
<DropdownMenuItem>نقش‌ها و دسترسی</DropdownMenuItem>
|
||
</DropdownMenuSubContent>
|
||
</DropdownMenuPortal>
|
||
</DropdownMenuSub>
|
||
</DropdownMenuGroup>
|
||
<DropdownMenuSeparator />
|
||
|
||
<DropdownMenuItem>
|
||
خروج
|
||
<DropdownMenuShortcut>⌥⇧Q</DropdownMenuShortcut>
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</SidebarMenuItem>
|
||
</SidebarMenu>
|
||
<motion.div
|
||
key={isCollapsed ? "h-collapsed" : "h-expanded"}
|
||
className={cn(
|
||
"flex items-center gap-2",
|
||
isCollapsed ? "flex-row md:flex-col-reverse" : "flex-row",
|
||
)}
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<SidebarTrigger />
|
||
</motion.div>
|
||
</SidebarHeader>
|
||
|
||
<SidebarContent className="overflow-hidden">
|
||
<ScrollArea className="min-h-0 flex-1">
|
||
<SidebarGroup className="px-0">
|
||
<SidebarGroupContent>
|
||
<ModulePanel
|
||
module={activeModule}
|
||
activeItemKey={activeItemKey}
|
||
onSelectItem={onItemChange}
|
||
/>
|
||
</SidebarGroupContent>
|
||
</SidebarGroup>
|
||
</ScrollArea>
|
||
</SidebarContent>
|
||
</Sidebar>
|
||
</Sidebar>
|
||
);
|
||
}
|
||
|
||
interface NavUserProps {
|
||
className?: string;
|
||
user: {
|
||
name: string;
|
||
email: string;
|
||
avatar: string;
|
||
};
|
||
}
|
||
|
||
function NavUser({ className, user }: NavUserProps) {
|
||
const { isMobile } = useSidebar();
|
||
const initials = getInitials(user.name);
|
||
return (
|
||
<SidebarMenu className={cn("w-full", className)}>
|
||
<SidebarMenuItem className="w-full">
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<SidebarMenuButton
|
||
size="default"
|
||
className="h-10 w-full data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||
>
|
||
<Avatar className="h-7 w-7">
|
||
<AvatarImage src={user.avatar} alt={user.name} />
|
||
<AvatarFallback className="bg-sidebar-primary text-xs font-medium text-sidebar-primary-foreground">
|
||
{initials}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<span className="min-w-0 flex-1 truncate text-sm font-medium">
|
||
{user.name}
|
||
</span>
|
||
<ChevronDown className="ms-auto size-4 text-muted-foreground" />
|
||
</SidebarMenuButton>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent
|
||
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
|
||
side={isMobile ? "bottom" : "left"}
|
||
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">
|
||
<Avatar className="h-8 w-8">
|
||
<AvatarImage src={user.avatar} alt={user.name} />
|
||
<AvatarFallback className="bg-sidebar-primary font-medium text-sidebar-primary-foreground">
|
||
{initials}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<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>
|
||
</div>
|
||
</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuGroup>
|
||
<DropdownMenuItem>
|
||
<Sparkles className="me-2 size-4" />
|
||
ارتقا به حرفه‌ای
|
||
</DropdownMenuItem>
|
||
</DropdownMenuGroup>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuGroup>
|
||
<DropdownMenuItem>
|
||
<BadgeCheck className="me-2 size-4" />
|
||
حساب کاربری
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem>
|
||
<CreditCard className="me-2 size-4" />
|
||
صورتحساب
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem>
|
||
<Bell className="me-2 size-4" />
|
||
اعلان‌ها
|
||
</DropdownMenuItem>
|
||
</DropdownMenuGroup>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem>
|
||
<LogOut className="me-2 size-4" />
|
||
خروج
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</SidebarMenuItem>
|
||
</SidebarMenu>
|
||
);
|
||
}
|
||
|
||
interface SidebarRightProps extends Omit<
|
||
React.ComponentProps<typeof Sidebar>,
|
||
"className"
|
||
> {
|
||
className?: string;
|
||
}
|
||
|
||
function RightPanelContent() {
|
||
return (
|
||
<div className="space-y-6 p-4 text-start">
|
||
<section className="space-y-3">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<SidebarGroupLabel className="text-xs font-medium tracking-wide text-muted-foreground">
|
||
شرکت‌کنندگان
|
||
</SidebarGroupLabel>
|
||
<Button variant="outline" size="sm" className="h-8 gap-2">
|
||
<UserPlus className="size-4" />
|
||
دعوت
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-1">
|
||
{data.participants.map((participant) => {
|
||
const statusClassName =
|
||
participant.status === "online"
|
||
? "bg-emerald-500"
|
||
: participant.status === "away"
|
||
? "bg-amber-500"
|
||
: "bg-muted-foreground/50";
|
||
const initials = getInitials(participant.name);
|
||
const isYou = participant.id === "you";
|
||
|
||
return (
|
||
<button
|
||
key={participant.id}
|
||
type="button"
|
||
className="flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-start hover:bg-accent"
|
||
>
|
||
<span
|
||
className={cn(
|
||
"mt-0.5 size-2 shrink-0 rounded-full",
|
||
statusClassName,
|
||
)}
|
||
aria-hidden="true"
|
||
/>
|
||
<Avatar className="h-7 w-7">
|
||
<AvatarFallback className="bg-primary text-xs font-medium text-primary-foreground">
|
||
{initials}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="truncate text-sm font-medium">
|
||
{participant.name}
|
||
</span>
|
||
{isYou && (
|
||
<Badge
|
||
variant="secondary"
|
||
className="h-5 px-1.5 text-[10px]"
|
||
>
|
||
شما
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<div className="truncate text-xs text-muted-foreground">
|
||
{participant.title}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<SidebarGroupLabel className="text-xs font-medium tracking-wide text-muted-foreground">
|
||
فعالیت تیم‌ها
|
||
</SidebarGroupLabel>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-8 px-2 text-muted-foreground hover:text-foreground"
|
||
>
|
||
مشاهده همه
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
{data.activity.map((event) => {
|
||
const Icon = event.icon;
|
||
return (
|
||
<div
|
||
key={event.id}
|
||
className="flex gap-3 rounded-md p-2 hover:bg-accent/50"
|
||
>
|
||
<div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-accent/50">
|
||
<Icon className="size-4 text-foreground" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<div className="truncate text-sm font-medium">
|
||
{event.title}
|
||
</div>
|
||
<div className="shrink-0 text-xs text-muted-foreground">
|
||
{event.time}
|
||
</div>
|
||
</div>
|
||
<div className="mt-0.5 text-xs text-muted-foreground">
|
||
{event.detail}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function SidebarRight({ className, ...props }: SidebarRightProps) {
|
||
return (
|
||
<Sidebar
|
||
collapsible="none"
|
||
side="left"
|
||
className={cn("sticky top-0 hidden h-svh border-s lg:flex", className)}
|
||
{...props}
|
||
>
|
||
<SidebarHeader className="flex h-14 items-center border-b px-2">
|
||
<NavUser user={data.user} />
|
||
</SidebarHeader>
|
||
<SidebarContent className="p-0">
|
||
<ScrollArea className="h-[calc(100svh-3.5rem)]">
|
||
<RightPanelContent />
|
||
</ScrollArea>
|
||
</SidebarContent>
|
||
</Sidebar>
|
||
);
|
||
}
|
||
|
||
interface ApplicationShell7Props {
|
||
className?: string;
|
||
}
|
||
|
||
export function ApplicationShell7({ className }: ApplicationShell7Props) {
|
||
const [activeKey, setActiveKey] = React.useState<ModuleId>(navModules[0].id);
|
||
const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
|
||
const [activeItemKey, setActiveItemKey] = React.useState(() =>
|
||
getDefaultItemKey(navModules[0]),
|
||
);
|
||
|
||
const activeModule =
|
||
navModules.find((module) => module.id === activeKey) ?? navModules[0];
|
||
const activeItemLabel = getActiveItemLabel(activeModule, activeItemKey);
|
||
|
||
React.useEffect(() => {
|
||
setActiveItemKey(getDefaultItemKey(activeModule));
|
||
}, [activeModule]);
|
||
|
||
return (
|
||
<SidebarProvider
|
||
dir="rtl"
|
||
lang="fa"
|
||
style={
|
||
{
|
||
"--sidebar-width": "350px",
|
||
} as React.CSSProperties
|
||
}
|
||
className={cn(className)}
|
||
>
|
||
<div className="hidden md:block">
|
||
<AppSidebar
|
||
activeKey={activeKey}
|
||
activeItemKey={activeItemKey}
|
||
onNavChange={setActiveKey}
|
||
onItemChange={setActiveItemKey}
|
||
/>
|
||
</div>
|
||
|
||
<SidebarInset>
|
||
<header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-3">
|
||
<a href="#" className="md:hidden">
|
||
<div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
|
||
<img
|
||
src="/block-media/shadcnblocks/block/logos/NovaSales-logo.svg"
|
||
alt="شاد‌سی‌ان بلاکس"
|
||
className="size-6 text-primary-foreground invert dark:invert-0"
|
||
/>
|
||
</div>
|
||
</a>
|
||
<div className="flex flex-1 items-center gap-2">
|
||
<ShellBreadcrumb
|
||
moduleLabel={activeModule.label}
|
||
itemLabel={activeItemLabel}
|
||
/>
|
||
</div>
|
||
<Sheet>
|
||
<SheetTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="lg:hidden"
|
||
aria-label="تیم"
|
||
>
|
||
<Users className="size-5" />
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent side="left" dir="rtl" className="w-80 p-0 text-start">
|
||
<SheetHeader className="px-4 pt-4">
|
||
<SheetTitle className="text-start">تیم</SheetTitle>
|
||
</SheetHeader>
|
||
<ScrollArea className="min-h-0 flex-1">
|
||
<RightPanelContent />
|
||
</ScrollArea>
|
||
</SheetContent>
|
||
</Sheet>
|
||
</header>
|
||
<div className="flex flex-1 flex-col gap-4 p-4">
|
||
<div className="h-[50vh] w-full rounded-xl bg-muted/50" />
|
||
<div className="h-[100vh] w-full rounded-xl bg-muted/50" />
|
||
</div>
|
||
</SidebarInset>
|
||
|
||
<SidebarRight />
|
||
|
||
<Drawer
|
||
open={isMobilePanelOpen}
|
||
onOpenChange={setIsMobilePanelOpen}
|
||
dismissible
|
||
>
|
||
<DrawerContent dir="rtl" className="text-start md:hidden">
|
||
<DrawerHeader>
|
||
<DrawerTitle className="text-start">{activeModule.label}</DrawerTitle>
|
||
</DrawerHeader>
|
||
<div className="pb-6">
|
||
<ModulePanel
|
||
module={activeModule}
|
||
activeItemKey={activeItemKey}
|
||
onSelectItem={(key) => {
|
||
setActiveItemKey(key);
|
||
setIsMobilePanelOpen(false);
|
||
}}
|
||
/>
|
||
</div>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
|
||
<nav
|
||
aria-label="ناوبری پایین موبایل"
|
||
className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden"
|
||
>
|
||
<div className="grid grid-cols-5">
|
||
{navModules.map((module) => {
|
||
const Icon = module.icon;
|
||
const isActive = module.id === activeKey;
|
||
return (
|
||
<button
|
||
key={module.id}
|
||
type="button"
|
||
onClick={() => {
|
||
setActiveKey(module.id);
|
||
setIsMobilePanelOpen(true);
|
||
}}
|
||
className={`flex flex-col items-center justify-center py-3 text-xs ${isActive
|
||
? "text-foreground"
|
||
: "text-muted-foreground hover:text-foreground"
|
||
}`}
|
||
aria-label={module.label}
|
||
>
|
||
<Icon className="h-5 w-5" />
|
||
<span className="sr-only">{module.label}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</nav>
|
||
</SidebarProvider>
|
||
);
|
||
}
|