caszl-next/app/components/LeftNav.tsx

"use client";
import React from "react";
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 min-h-[600px] h-full bg-[#d7ecfd] rounded shadow pt-2"
      }
    >
      <div className={"flex items-center pl-2 h-7"}>
        <Image src={circle} alt={"circle icon"} height={16} width={16} />
        <span className={"pl-2"}>{title}</span>
      </div>
      {navigations.length > 0 && (
        <div
          className={`${styles.navContent} mt-3 mx-3 rounded-lg px-2.5 py-[5px]`}
        >
          <ul className={styles.navItems}>
            {navigations.map((navigation) => (
              <li key={navigation.href}>
                <Link
                  className={`text-sm px-[9px] h-[34px] flex items-center font-bold transition-all hover:text-[#fff176] hover:text-xs ${
                    navigation.href === pathname
                      ? "text-[#fff176] text-xs"
                      : "text-white"
                  }`}
                  href={navigation.href}
                >
                  {navigation.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default LeftNav;