101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { SparklesIcon } from "lucide-react";
|
|
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarRail,
|
|
SidebarSeparator,
|
|
} from "@/components/ui/sidebar";
|
|
import {
|
|
adminNavIconBySegment,
|
|
LogIn,
|
|
} from "@/modules/_config/admin-nav-icons";
|
|
import { adminShellNavItems, ADMIN_BASE } from "@/modules/_config/admin-nav";
|
|
|
|
function isActive(pathname: string, href: string): boolean {
|
|
if (href === ADMIN_BASE || href === `${ADMIN_BASE}/`) {
|
|
return pathname === ADMIN_BASE || pathname === `${ADMIN_BASE}/`;
|
|
}
|
|
return pathname === href || pathname.startsWith(`${href}/`);
|
|
}
|
|
|
|
export function AdminAppSidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<Sidebar collapsible="icon" variant="inset">
|
|
<SidebarHeader className="border-b border-sidebar-border">
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
render={<Link href={ADMIN_BASE} />}
|
|
className="gap-3 px-0 hover:bg-transparent"
|
|
>
|
|
<SparklesIcon data-icon="inline-start" aria-hidden />
|
|
<div className="flex flex-col items-start gap-0.5 group-data-[collapsible=icon]:hidden">
|
|
<span className="font-semibold tracking-tight text-sidebar-foreground">
|
|
彩票后台
|
|
</span>
|
|
<span className="text-xs text-sidebar-foreground/70">
|
|
Lottery Admin
|
|
</span>
|
|
</div>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>工作台</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{adminShellNavItems.map((item) => {
|
|
const Icon = adminNavIconBySegment[item.segment];
|
|
return (
|
|
<SidebarMenuItem key={item.segment}>
|
|
<SidebarMenuButton
|
|
tooltip={item.label}
|
|
isActive={isActive(pathname, item.href)}
|
|
render={<Link href={item.href} />}
|
|
>
|
|
<Icon data-icon="inline-start" aria-hidden />
|
|
<span>{item.label}</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarSeparator />
|
|
<SidebarFooter className="border-t border-sidebar-border">
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
tooltip="登录"
|
|
render={<Link href="/admin/login" />}
|
|
>
|
|
<LogIn data-icon="inline-start" aria-hidden />
|
|
<span>登录入口</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
);
|
|
}
|