69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarHeader,
|
|
SidebarTrigger,
|
|
} from "@/components/ui/sidebar"
|
|
import Link from "next/link"
|
|
import { ManagementIcon, UploadAccount } from "../icons"
|
|
import Image from "next/image"
|
|
|
|
export function AppSidebar() {
|
|
return (
|
|
<Sidebar
|
|
collapsible="icon"
|
|
className="group w-65 data-[state=collapsed]:w-24"
|
|
>
|
|
<div className="relative h-full w-full rounded-xl border border-white bg-black text-white">
|
|
{/* TRIGGER */}
|
|
<div className="absolute top-4 right-4 z-10 transition-all duration-300 group-data-[state=collapsed]:right-auto group-data-[state=collapsed]:left-1/2 group-data-[state=collapsed]:-translate-x-1/2">
|
|
<SidebarTrigger className="rounded-md p-2 transition hover:bg-white/10" />
|
|
</div>
|
|
|
|
{/* LOGO */}
|
|
<div className="flex justify-center pt-16 transition-all duration-300 group-data-[state=collapsed]:pt-14">
|
|
<Image
|
|
src="/multipool-logo.png"
|
|
loading="eager"
|
|
alt="logo"
|
|
width={240}
|
|
height={240}
|
|
className="transition-all duration-300 group-data-[state=collapsed]:h-6 group-data-[state=collapsed]:w-6"
|
|
/>
|
|
</div>
|
|
|
|
<SidebarHeader />
|
|
|
|
{/* MENU */}
|
|
<SidebarContent className="mt-10">
|
|
<SidebarGroup className="flex flex-col items-stretch space-y-2 px-2">
|
|
<Link
|
|
href="/dashboard/management-account"
|
|
className="flex w-full items-center justify-start gap-3 rounded-lg p-3 transition group-data-[state=collapsed]:justify-center hover:bg-white/10"
|
|
>
|
|
<ManagementIcon className="h-5 w-5 shrink-0" />
|
|
<span className="group-data-[state=collapsed]:hidden">
|
|
Management Account
|
|
</span>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/dashboard/upload-account-data"
|
|
className="flex w-full items-center justify-start gap-3 rounded-lg p-3 transition group-data-[state=collapsed]:justify-center hover:bg-white/10"
|
|
>
|
|
<UploadAccount className="h-5 w-5 shrink-0" />
|
|
<span className="group-data-[state=collapsed]:hidden">
|
|
Upload Account Data
|
|
</span>
|
|
</Link>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter />
|
|
</div>
|
|
</Sidebar>
|
|
)
|
|
}
|