auto-trade/features/layout/components/sidebar.tsx

"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>
  );
}