92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
"use client"
|
|
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"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
const menu = [
|
|
{
|
|
title: "account-management",
|
|
icon: <ManagementIcon className="h-5 w-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "upload-account-data",
|
|
icon: <UploadAccount className="h-5 w-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "spesific-target",
|
|
icon: <UploadAccount className="h-5 w-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "spesific-target-mapping",
|
|
icon: <UploadAccount className="h-5 w-5 shrink-0" />,
|
|
},
|
|
]
|
|
|
|
export function AppSidebar() {
|
|
const pathname = usePathname()
|
|
return (
|
|
<Sidebar collapsible="icon">
|
|
<div className="bg-gray-60 h-full border-2 border-violet-300 text-black">
|
|
{/* 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 className="h-24 w-24 bg-gray-500"></div>
|
|
</div>
|
|
|
|
<SidebarHeader />
|
|
|
|
{/* MENU */}
|
|
<SidebarContent className="mt-10">
|
|
<SidebarGroup className="flex flex-col items-stretch space-y-2 px-2">
|
|
{menu.map((item) => (
|
|
<Link
|
|
key={item.title}
|
|
href={"/dashboard/" + item.title}
|
|
className={`flex w-full items-center justify-start gap-3 rounded-lg p-3 text-sm ${pathname.includes(item.title) ? "border-2 border-violet-600 bg-violet-100 font-bold text-violet-600" : "text-gray-600"} transition group-data-[state=collapsed]:justify-center hover:bg-white/10`}
|
|
>
|
|
{item.icon}
|
|
<span className="capitalize group-data-[state=collapsed]:hidden">
|
|
{item.title.split("-").join(" ")}
|
|
</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>
|
|
)
|
|
}
|