109 lines
3.5 KiB
TypeScript
109 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>
|
|
)
|
|
}
|