Unify tabs with nextui's ListBoxItem

frontend/app/projects/[projectId]/folders/layout.tsx

@@ -157,7 +157,7 @@ export default function FoldersLayout({
   params: { projectId: number };
 }) {
   const router = useRouter();
-  const pathname = usePathname()
+  const pathname = usePathname();
   const [folders, setFolders] = useState([]);
   const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
 
@@ -226,7 +226,9 @@ export default function FoldersLayout({
         // Redirect to the smallest folder ID page if the path is "projects/1/folders
         if (pathname === `/projects/${params.projectId}/folders`) {
           const smallestFolderId = Math.min(...data.map((folder) => folder.id));
-          router.push(`/projects/${params.projectId}/folders/${smallestFolderId}/cases`);
+          router.push(
+            `/projects/${params.projectId}/folders/${smallestFolderId}/cases`
+          );
         }
       } catch (error) {
         console.error("Error in effect:", error.message);
@@ -236,6 +238,9 @@ export default function FoldersLayout({
     fetchDataEffect();
   }, [folderId]);
 
+  const baseClass = "p-3 rounded-none";
+  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
+
   return (
     <div className="flex w-full">
       <div className="w-64 min-h-[calc(100vh-64px)] border-r-1 dark:border-neutral-700">
@@ -248,7 +253,7 @@ export default function FoldersLayout({
         >
           New Folder
         </Button>
-        <Listbox aria-label="Listbox Variants">
+        <Listbox aria-label="Listbox Variants" variant="light" className="p-0">
           {folders.map((folder, index) => (
             <ListboxItem
               key={index}
@@ -257,11 +262,11 @@ export default function FoldersLayout({
                   `/projects/${params.projectId}/folders/${folder.id}/cases`
                 )
               }
-              startContent={<Folder size={20} color="#99ccff" fill="#99ccff" />}
+              startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
               className={
                 selectedFolder && folder.id === selectedFolder.id
-                  ? "bg-gray-300 dark:bg-gray-700"
+                  ? selectedClass
-                  : ""
+                  : baseClass
               }
               endContent={
                 <FolderEditMenu
@@ -276,9 +281,7 @@ export default function FoldersLayout({
           ))}
         </Listbox>
       </div>
-      <div className="flex-grow w-full">
+      <div className="flex-grow w-full">{children}</div>
-        {children}
-      </div>
 
       <FolderDialog
         isOpen={isFolderDialogOpen}

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

@@ -10,7 +10,8 @@ export default function Sidebar() {
   const router = useRouter();
 
   const [currentKey, setCurrentTab] = useState("home");
-  const listBoxItemClassName = "p-3 rounded-none border-l-4 border-transparent";
+  const baseClass = "p-3 rounded-none";
+  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
 
   const handleTabClick = (key: string) => {
     setCurrentTab(key);
@@ -45,6 +46,7 @@ export default function Sidebar() {
     <div className="w-64 border-r-1 dark:border-neutral-700">
       <Listbox
         aria-label="Listbox Variants"
+        variant="light"
         className="p-0"
         onClick={() => router.push(`/projects/${projectId}/home`)}
       >
@@ -53,11 +55,7 @@ export default function Sidebar() {
             key={itr.key}
             startContent={itr.startContent}
             onClick={() => handleTabClick(itr.key)}
-            className={
+            className={currentKey === itr.key ? selectedClass : baseClass}
-              currentKey === itr.key
-                ? listBoxItemClassName + " border-gray-600 "
-                : listBoxItemClassName
-            }
           >
             {itr.text}
           </ListboxItem>