caszl-next/app/_components/LeftNav.tsx

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