From f78308343e6bea5f60d8d1d2bab36b25e05e4a5c Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 13 Apr 2024 19:38:47 +0900
Subject: [PATCH] Changed sidebar's appearance and behavior

---
 .../[projectId]/folders/FoldersPane.tsx       |  4 ++--
 frontend/app/projects/[projectId]/sidebar.tsx | 22 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/app/projects/[projectId]/folders/FoldersPane.tsx b/frontend/app/projects/[projectId]/folders/FoldersPane.tsx
index 3a7e8c6..5f4aad1 100644
--- a/frontend/app/projects/[projectId]/folders/FoldersPane.tsx
+++ b/frontend/app/projects/[projectId]/folders/FoldersPane.tsx
@@ -97,7 +97,7 @@ export default function FoldersPane({ projectId }: Props) {
     fetchDataEffect();
   }, [folderId]);
 
-  const baseClass = "px-3 py-2 rounded-none";
+  const baseClass = "";
   const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
 
   return (
@@ -112,7 +112,7 @@ export default function FoldersPane({ projectId }: Props) {
         >
           New Folder
         </Button>
-        <Listbox aria-label="Listbox Variants" variant="light" className="p-0">
+        <Listbox aria-label="Listbox Variants" variant="light">
           {folders.map((folder, index) => (
             <ListboxItem
               key={index}
diff --git a/frontend/app/projects/[projectId]/sidebar.tsx b/frontend/app/projects/[projectId]/sidebar.tsx
index 6640de5..ad6a943 100644
--- a/frontend/app/projects/[projectId]/sidebar.tsx
+++ b/frontend/app/projects/[projectId]/sidebar.tsx
@@ -1,20 +1,20 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Listbox, ListboxItem } from "@nextui-org/react";
 import { Home, Files, FlaskConical } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";
 
 export default function Sidebar() {
   const { projectId } = useGetCurrentIds();
   const router = useRouter();
+  const pathname = usePathname();
 
   const [currentKey, setCurrentTab] = useState("home");
   const baseClass = "p-3 rounded-none";
-  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
+  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700 border-l-3 border-neutral-800`;
 
   const handleTabClick = (key: string) => {
-    setCurrentTab(key);
     if (key === "home") {
       router.push(`/projects/${projectId}/home`);
     } else if (key === "cases") {
@@ -24,6 +24,20 @@ export default function Sidebar() {
     }
   };
 
+  useEffect(() => {
+    const handleRouteChange = (currentPath: string) => {
+      if (currentPath.includes("home")) {
+        setCurrentTab("home");
+      } else if (currentPath.includes("folders")) {
+        setCurrentTab("cases");
+      } else if (currentPath.includes("runs")) {
+        setCurrentTab("runs");
+      }
+    };
+
+    handleRouteChange(pathname);
+  }, [pathname]);
+
   const tabItems = [
     {
       key: "home",