Files
frontend/apps/dm/components/Lnb.tsx
T

55 lines
1.4 KiB
TypeScript

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
export type LnbMenu = {
label: string;
href: string;
};
type Props = {
menus?: LnbMenu[];
className?: string;
};
const defaultMenus: LnbMenu[] = [
{ label: "수요처", href: "/apply/dmdco" },
{ label: "수요정보등록", href: "/apply/dmdinfo" },
{ label: "수요신청현황", href: "/apply/status" },
];
export default function Lnb({ menus, className = "" }: Props) {
const pathname = usePathname();
const navMenus = menus ?? defaultMenus;
return (
<aside className={`fixed right-2 top-[110px] z-50 w-[260px] ${className}`}>
<ul className="space-y-1">
{navMenus.map((menu) => {
const isActive =
pathname === menu.href ||
pathname.startsWith(`${menu.href}/`);
return (
<li key={menu.href}>
<Link
href={menu.href}
className={`
block text-[16px] font-medium transition px-5 py-2
${
isActive
? "text-[#00AEEF]"
: "text-[#767676] hover:text-[#00AEEF]"
}
`}
>
{menu.label}
</Link>
</li>
);
})}
</ul>
</aside>
);
}