Unify tabs with nextui's ListBoxItem

frontend/app/projects/[projectId]/sidebar.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { Menu, MenuItem } from "@nextui-org/react";
+import { useState } from "react";
+import { Listbox, ListboxItem } from "@nextui-org/react";
 import { Home, Files, FlaskConical } from "lucide-react";
 import { useRouter } from "next/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";
@@ -7,31 +8,61 @@ import useGetCurrentIds from "@/utils/useGetCurrentIds";
 export default function Sidebar() {
   const { projectId } = useGetCurrentIds();
   const router = useRouter();
+
+  const [currentKey, setCurrentTab] = useState("home");
+  const listBoxItemClassName = "p-3 rounded-none border-l-4 border-transparent";
+
+  const handleTabClick = (key: string) => {
+    setCurrentTab(key);
+    if (key === "home") {
+      router.push(`/projects/${projectId}/home`);
+    } else if (key === "cases") {
+      router.push(`/projects/${projectId}/folders`);
+    } else if (key === "runs") {
+      router.push(`/projects/${projectId}/runs`);
+    }
+  };
+
+  const tabItems = [
+    {
+      key: "home",
+      text: "Home",
+      startContent: <Home strokeWidth={1} size={28} />,
+    },
+    {
+      key: "cases",
+      text: "Test Cases",
+      startContent: <Files strokeWidth={1} size={28} />,
+    },
+    {
+      key: "runs",
+      text: "Test Runs",
+      startContent: <FlaskConical strokeWidth={1} size={28} />,
+    },
+  ];
+
   return (
     <div className="w-64 border-r-1 dark:border-neutral-700">
-      <Menu aria-label="sidebar">
+      <Listbox
-        <MenuItem
+        aria-label="Listbox Variants"
-          startContent={<Home strokeWidth={1} size={28} />}
+        className="p-0"
-          className="p-3"
+        onClick={() => router.push(`/projects/${projectId}/home`)}
-          onClick={() => router.push(`/projects/${projectId}/home`)}
+      >
-        >
+        {tabItems.map((itr, index) => (
-          Home
+          <ListboxItem
-        </MenuItem>
+            key={itr.key}
-        <MenuItem
+            startContent={itr.startContent}
-          startContent={<Files strokeWidth={1} size={28} />}
+            onClick={() => handleTabClick(itr.key)}
-          className="p-3"
+            className={
-          onClick={() => router.push(`/projects/${projectId}/folders`)}
+              currentKey === itr.key
-        >
+                ? listBoxItemClassName + " border-gray-600 "
-          Test Cases
+                : listBoxItemClassName
-        </MenuItem>
+            }
-        <MenuItem
+          >
-          startContent={<FlaskConical strokeWidth={1} size={28} />}
+            {itr.text}
-          className="p-3"
+          </ListboxItem>
-          onClick={() => router.push(`/projects/${projectId}/runs`)}
+        ))}
-        >
+      </Listbox>
-          Test Runs
-        </MenuItem>
-      </Menu>
     </div>
   );
 }