108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
useSidebar,
|
|
} from "@/components/ui/sidebar";
|
|
import { t } from "i18next";
|
|
import { cn } from "@root/lib/utils";
|
|
|
|
import {
|
|
Home,
|
|
Users,
|
|
Server,
|
|
Cable,
|
|
ListChecks,
|
|
FileText,
|
|
Settings,
|
|
EarthLock,
|
|
} from "lucide-react";
|
|
import { UpdateButton } from "@/components/layout/update-button";
|
|
import React from "react";
|
|
import { SheetClose } from "@/components/ui/sheet";
|
|
import logo from "@/assets/image/logo.png";
|
|
|
|
const menuItems = [
|
|
{ title: "Home", url: "/home", icon: Home },
|
|
{ title: "Profiles", url: "/profile", icon: Users },
|
|
{ title: "Proxies", url: "/proxies", icon: Server },
|
|
{ title: "Connections", url: "/connections", icon: Cable },
|
|
{ title: "Rules", url: "/rules", icon: ListChecks },
|
|
{ title: "Logs", url: "/logs", icon: FileText },
|
|
{ title: "Settings", url: "/settings", icon: Settings },
|
|
];
|
|
|
|
export function AppSidebar() {
|
|
const { isMobile } = useSidebar();
|
|
return (
|
|
<Sidebar variant="floating" collapsible="icon">
|
|
<SidebarHeader>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
className={cn(
|
|
"flex h-12 items-center transition-all duration-200",
|
|
"group-data-[state=expanded]:w-full group-data-[state=expanded]:gap-2 group-data-[state=expanded]:px-3",
|
|
"group-data-[state=collapsed]:w-full group-data-[state=collapsed]:justify-center",
|
|
)}
|
|
>
|
|
<img src={logo} alt="logo" className="h-6 w-6 flex-shrink-0" />
|
|
<span className="font-semibold whitespace-nowrap group-data-[state=collapsed]:hidden">
|
|
Koala Clash
|
|
</span>
|
|
</SidebarMenuButton>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu className="gap-3">
|
|
{menuItems.map((item) => {
|
|
const isActive = location.pathname === item.url;
|
|
const linkElement = (
|
|
<Link
|
|
key={item.title}
|
|
to={item.url}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
|
|
"data-[active=true]:font-semibold data-[active=true]:border",
|
|
)}
|
|
>
|
|
<item.icon className="h-4 w-4 drop-shadow-md" />
|
|
{t(item.title)}
|
|
</Link>
|
|
);
|
|
return (
|
|
<SidebarMenuItem key={item.title} className="my-1">
|
|
<SidebarMenuButton
|
|
asChild
|
|
isActive={isActive}
|
|
tooltip={t(item.title)}
|
|
>
|
|
{isMobile ? (
|
|
<SheetClose asChild>{linkElement}</SheetClose>
|
|
) : (
|
|
linkElement
|
|
)}
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<div className="w-full flex justify-center">
|
|
<UpdateButton className="bg-green-700 hover:bg-green-500 hover:text-white text-white text-shadow-md" />
|
|
</div>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|