108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
type LnbMenuItem = {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
|
|
type LnbConfig = {
|
|
title: string;
|
|
menus: LnbMenuItem[];
|
|
};
|
|
|
|
const LNB_MAP: Record<string, LnbConfig> = {
|
|
intro: {
|
|
title: "소개",
|
|
menus: [
|
|
{ label: "물 재이용 법", href: "/intro/law" },
|
|
{ label: "빗물 이용시설", href: "/intro/rain" },
|
|
{ label: "중수도", href: "/intro/reuseWater" },
|
|
{ label: "하수처리수", href: "/intro/treated" },
|
|
],
|
|
},
|
|
|
|
status: {
|
|
title: "현황",
|
|
menus: [
|
|
{ label: "빗물이용시설(현황)", href: "/status/rain" },
|
|
{ label: "중수도(현황)", href: "/status/greywater" },
|
|
{ label: "하수처리수 재이용시설(현황)", href: "/status/sewage" },
|
|
],
|
|
},
|
|
|
|
case: {
|
|
title: "사례",
|
|
menus: [
|
|
{ label: "빗물 재이용 사례", href: "/example/rain" },
|
|
{ label: "중수 재이용 사례", href: "/example/greywater" },
|
|
{ label: "하수 재이용 사례", href: "/example/sewage" },
|
|
{ label: "해외 재이용 사례", href: "/example/globalCase" },
|
|
],
|
|
},
|
|
|
|
apply: {
|
|
title: "수요신청",
|
|
menus: [
|
|
{ label: "수요처등록", href: "/apply/dmdco" },
|
|
{ label: "수요정보등록", href: "/apply/register" },
|
|
{ label: "수요신청현황", href: "/apply/status" },
|
|
],
|
|
},
|
|
};
|
|
|
|
function getCategory(pathname: string): keyof typeof LNB_MAP {
|
|
if (pathname.startsWith("/intro")) return "intro";
|
|
if (pathname.startsWith("/status")) return "status";
|
|
if (pathname.startsWith("/example")) return "case";
|
|
if (pathname.startsWith("/apply")) return "apply";
|
|
return "intro";
|
|
}
|
|
|
|
function isActiveMenu(pathname: string, href: string) {
|
|
return pathname === href || pathname.startsWith(`${href}/`);
|
|
}
|
|
|
|
export default function Lnb() {
|
|
const pathname = usePathname();
|
|
const category = getCategory(pathname);
|
|
const { title, menus } = LNB_MAP[category];
|
|
|
|
return (
|
|
<aside
|
|
className={[
|
|
"fixed left-0 top-[83px]",
|
|
"z-40 h-[calc(100vh-83px)] w-[260px] shrink-0 overflow-y-auto bg-white",
|
|
].join(" ")}
|
|
>
|
|
<div className="flex h-[120px] items-center justify-center bg-gradient-to-r from-cyan-500 to-green-500 text-[40px] font-bold text-white">
|
|
{title}
|
|
</div>
|
|
|
|
<ul>
|
|
{menus.map((item) => {
|
|
const active = isActiveMenu(pathname, item.href);
|
|
|
|
return (
|
|
<li key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
className={[
|
|
"block border-b border-slate-300 px-5 py-5 text-center text-base font-semibold transition-colors",
|
|
active
|
|
? "bg-white text-sky-500"
|
|
: "bg-[#F0F0F0] text-[#767676] hover:bg-white hover:text-sky-500",
|
|
].join(" ")}
|
|
aria-current={active ? "page" : undefined}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</aside>
|
|
);
|
|
} |