update

app/_components/LeftNav.tsx

@@ -0,0 +1,53 @@
+"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;