54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import circle from "@/app/assets/circle.png";
|
|
import styles from "./LeftNav.module.scss";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const LeftNav = ({
|
|
navigations,
|
|
title,
|
|
}: {
|
|
navigations?: any[];
|
|
title: string;
|
|
}) => {
|
|
const pathname = usePathname();
|
|
return (
|
|
<div
|
|
className={
|
|
"left-nav h-full min-h-[600px] rounded bg-[#d7ecfd] pt-2 shadow"
|
|
}
|
|
>
|
|
<div className={"flex h-7 items-center pl-2"}>
|
|
<Image src={circle} alt={"circle icon"} height={16} width={16} />
|
|
<span className={"pl-2"}>{title}</span>
|
|
</div>
|
|
{(navigations?.length ?? 0) > 0 && (
|
|
<div
|
|
className={`${styles.navContent} mx-3 mt-3 rounded-lg px-2.5 py-[5px]`}
|
|
>
|
|
<ul className={styles.navItems}>
|
|
{navigations?.map((navigation) => (
|
|
<li key={navigation.href}>
|
|
<Link
|
|
className={`flex h-[34px] items-center px-[9px] text-sm font-bold transition-all hover:text-xs hover:text-[#fff176] ${
|
|
navigation.href === pathname
|
|
? "text-xs text-[#fff176]"
|
|
: "text-white"
|
|
}`}
|
|
href={navigation.href}
|
|
>
|
|
{navigation.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LeftNav;
|