78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
|
import {
|
||
|
|
Sidebar,
|
||
|
|
SidebarContent,
|
||
|
|
SidebarGroup,
|
||
|
|
SidebarGroupContent,
|
||
|
|
SidebarMenu,
|
||
|
|
SidebarMenuButton,
|
||
|
|
SidebarMenuItem,
|
||
|
|
SidebarHeader,
|
||
|
|
} from "@/components/ui/sidebar";
|
||
|
|
import logo from "@/assets/image/logo.png";
|
||
|
|
import { useLocation, useRouter } from "@tanstack/react-router";
|
||
|
|
import { useMemo } from "react";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
|
||
|
|
const title = import.meta.env.VITE_APP_TITLE;
|
||
|
|
const isInside = import.meta.env.VITE_IS_INSIDE === "true";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
menus: any[];
|
||
|
|
isAdmin?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function AppSidebar({ menus, isAdmin }: Props) {
|
||
|
|
const router = useRouter();
|
||
|
|
const location = useLocation();
|
||
|
|
const currentPath = useMemo(
|
||
|
|
() => location.pathname.replace(import.meta.env.VITE_BASEPATH, ""),
|
||
|
|
[location.pathname],
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<Sidebar className="[&_.bg-sidebar]:bg-transparent border-none">
|
||
|
|
<SidebarHeader className="m-2 p-0">
|
||
|
|
<div className="flex items-center space-x-2 text-left w-full h-[60px]">
|
||
|
|
<img
|
||
|
|
src={logo}
|
||
|
|
alt=""
|
||
|
|
className="size-12 object-contain rounded-full bg-white overflow-hidden"
|
||
|
|
/>
|
||
|
|
<div className="text-primary text-2xl font-bold">
|
||
|
|
{isAdmin ? "管理后台" : title}
|
||
|
|
</div>
|
||
|
|
{isInside && (
|
||
|
|
<Badge className="bg-transparent text-primary border-primary">
|
||
|
|
内网
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</SidebarHeader>
|
||
|
|
<SidebarContent className="rounded-xl bg-white/50 backdrop-blur-lg m-2 mt-0">
|
||
|
|
<SidebarGroup>
|
||
|
|
<SidebarGroupContent>
|
||
|
|
<SidebarMenu>
|
||
|
|
{menus.map((item) => (
|
||
|
|
<SidebarMenuItem key={item.title}>
|
||
|
|
<SidebarMenuButton
|
||
|
|
asChild
|
||
|
|
isActive={currentPath === item.url}
|
||
|
|
onClick={() => {
|
||
|
|
router.navigate({ to: item.url });
|
||
|
|
}}
|
||
|
|
className="data-[active=true]:!bg-primary data-[active=true]:!text-white hover:bg-primary/10"
|
||
|
|
>
|
||
|
|
<div className="h-[40px] px-4 cursor-pointer">
|
||
|
|
{item.icon}
|
||
|
|
<span>{item.title}</span>
|
||
|
|
</div>
|
||
|
|
</SidebarMenuButton>
|
||
|
|
</SidebarMenuItem>
|
||
|
|
))}
|
||
|
|
</SidebarMenu>
|
||
|
|
</SidebarGroupContent>
|
||
|
|
</SidebarGroup>
|
||
|
|
</SidebarContent>
|
||
|
|
</Sidebar>
|
||
|
|
);
|
||
|
|
}
|