81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { BarChart2, Home, Settings, User, Wallet } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { MenuItem } from "../types";
|
|
|
|
const MENU_ITEMS: MenuItem[] = [
|
|
{
|
|
title: "대시보드",
|
|
href: "/",
|
|
icon: Home,
|
|
variant: "default",
|
|
matchExact: true,
|
|
},
|
|
{
|
|
title: "자동매매",
|
|
href: "/trade",
|
|
icon: BarChart2,
|
|
variant: "ghost",
|
|
},
|
|
{
|
|
title: "자산현황",
|
|
href: "/assets",
|
|
icon: Wallet,
|
|
variant: "ghost",
|
|
},
|
|
{
|
|
title: "프로필",
|
|
href: "/profile",
|
|
icon: User,
|
|
variant: "ghost",
|
|
},
|
|
{
|
|
title: "설정",
|
|
href: "/settings",
|
|
icon: Settings,
|
|
variant: "ghost",
|
|
},
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<aside className="hidden h-[calc(100vh-4rem)] shrink-0 overflow-y-auto border-r border-zinc-200 bg-white py-6 pl-2 pr-6 dark:border-zinc-800 dark:bg-black md:sticky md:top-16 md:block md:w-64 lg:w-72">
|
|
<div className="flex flex-col space-y-1">
|
|
{MENU_ITEMS.map((item) => {
|
|
const isActive = item.matchExact
|
|
? pathname === item.href
|
|
: pathname.startsWith(item.href);
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 transition-colors",
|
|
isActive
|
|
? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50"
|
|
: "text-zinc-500 dark:text-zinc-400",
|
|
)}
|
|
>
|
|
<item.icon
|
|
className={cn(
|
|
"mr-3 h-5 w-5 shrink-0 transition-colors",
|
|
isActive
|
|
? "text-zinc-900 dark:text-zinc-50"
|
|
: "text-zinc-400 group-hover:text-zinc-900 dark:text-zinc-500 dark:group-hover:text-zinc-50",
|
|
)}
|
|
/>
|
|
{item.title}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|