115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import {
|
|
SidebarProvider,
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarGroupContent,
|
|
SidebarMenu,
|
|
SidebarMenuItem,
|
|
SidebarMenuButton,
|
|
SidebarHeader,
|
|
SidebarInset,
|
|
SidebarTrigger,
|
|
} from "@/components/ui/sidebar";
|
|
import { ClipboardList, Server, LayoutDashboard, LucideIcon } from "lucide-react";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { DropdownMenuAvatar, DiscordMemberProfile } from "@/components/dropdown-menu-avatar";
|
|
|
|
interface NavItem {
|
|
href: string;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
isActive: (pathname: string) => boolean;
|
|
}
|
|
|
|
const NAV_ITEMS: NavItem[] = [
|
|
{
|
|
href: "/admin",
|
|
label: "Dashboard",
|
|
icon: LayoutDashboard,
|
|
isActive: (pathname) => pathname === "/admin",
|
|
},
|
|
{
|
|
href: "/admin/form",
|
|
label: "Form",
|
|
icon: ClipboardList,
|
|
isActive: (pathname) => pathname === "/admin/form",
|
|
},
|
|
{
|
|
href: "/admin/backend",
|
|
label: "Backend",
|
|
icon: Server,
|
|
isActive: (pathname) => pathname.startsWith("/admin/backend"),
|
|
},
|
|
];
|
|
|
|
export function AdminShell({
|
|
children,
|
|
userName,
|
|
userImage,
|
|
profile,
|
|
}: {
|
|
children: React.ReactNode;
|
|
userName?: string;
|
|
userImage?: string;
|
|
profile?: DiscordMemberProfile | null;
|
|
}) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<SidebarProvider>
|
|
<div className="flex w-full min-h-screen bg-background text-foreground">
|
|
<Sidebar variant="sidebar" collapsible="icon">
|
|
<SidebarHeader className="border-b border-border py-4 px-4">
|
|
<div className="flex flex-row items-center justify-between">
|
|
<span className="font-bold text-primary text-lg">Admin</span>
|
|
<div className="flex items-center gap-1">
|
|
{(userName || profile) && (
|
|
<DropdownMenuAvatar
|
|
userName={userName || ""}
|
|
userImage={userImage || ""}
|
|
profile={profile || null}
|
|
showName={false}
|
|
/>
|
|
)}
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</SidebarHeader>
|
|
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{NAV_ITEMS.map(({ href, label, icon: Icon, isActive }) => (
|
|
<SidebarMenuItem key={href}>
|
|
<SidebarMenuButton asChild isActive={isActive(pathname)}>
|
|
<Link href={href}>
|
|
<Icon className="w-4 h-4" />
|
|
<span>{label}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
|
|
<SidebarInset>
|
|
<div className="md:hidden p-2">
|
|
<SidebarTrigger />
|
|
</div>
|
|
{children}
|
|
</SidebarInset>
|
|
</div>
|
|
</SidebarProvider>
|
|
);
|
|
} |