Update frontend/src/components/Sidebar.tsx

frontend/src/components/Sidebar.tsx

@@ -1,4 +1,12 @@
-import { FileTextIcon, HelpCircleIcon } from 'lucide-react';
+import { useState } from "react";
+import {
+  FileTextIcon,
+  HelpCircleIcon,
+  PlusCircle,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
+import { Microscope, Stethoscope, FlaskConical } from "lucide-react";
 
 interface SidebarProps {
   selectedTest: string;
@@ -6,57 +14,81 @@ interface SidebarProps {
 }
 
 export function Sidebar({ selectedTest, onTestChange }: SidebarProps) {
+  const [isTestOpen, setIsTestOpen] = useState(true);
+
   const testTypes = [
-    { value: 'cytology', label: 'Cytology Analysis' },
-    { value: 'colposcopy', label: 'Colposcopy Analysis' },
-    { value: 'histopathology', label: 'Histopathology Analysis' },
+    { value: "cytology", label: "Cytology Analysis", icon: Microscope },
+    { value: "colposcopy", label: "Colposcopy Analysis", icon: Stethoscope },
+    { value: "histopathology", label: "Histopathology Analysis", icon: FlaskConical },
   ];
 
   return (
-    <aside className="w-64 bg-white border-r border-gray-200 p-4">
-      <div className="space-y-4">
-        {/* Gradient Header */}
-        <h3 className="text-lg font-semibold text-white mb-3 px-3 py-2 rounded-md bg-gradient-to-r from-blue-800 to-teal-600 shadow-sm">
-          New Test
-        </h3>
-
-        {/* Test Selection */}
-        <div className="flex flex-col gap-2">
-          {testTypes.map((test) => (
-            <label
-              key={test.value}
-              className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer border transition-all duration-200 
-                ${
-                  selectedTest === test.value
-                    ? 'border-blue-600 bg-blue-50 text-blue-900 font-medium shadow-sm'
-                    : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50 text-gray-700'
-                }`}
-            >
-              <input
-                type="radio"
-                name="testType"
-                value={test.value}
-                checked={selectedTest === test.value}
-                onChange={() => onTestChange(test.value)}
-                className="form-radio h-4 w-4 text-blue-600 focus:ring-blue-500"
-              />
-              <span>{test.label}</span>
-            </label>
-          ))}
+    <aside className="w-72 h-screen bg-white border-r border-gray-200 p-4 flex flex-col justify-between">
+      <div className="space-y-2">
+        {/* --- Start New Test Dropdown --- */}
+        <div>
+          <button
+            onClick={() => setIsTestOpen(!isTestOpen)}
+            className="flex items-center justify-between w-full px-3 py-3 rounded-lg hover:bg-gray-50 transition-colors text-gray-800 font-semibold"
+          >
+            <div className="flex items-center gap-3">
+              <PlusCircle className="w-5 h-5 text-teal-600" />
+              <span>Start New Test</span>
+            </div>
+            {isTestOpen ? (
+              <ChevronDown className="w-5 h-5 text-gray-500" />
+            ) : (
+              <ChevronRight className="w-5 h-5 text-gray-500" />
+            )}
+          </button>
+
+          {isTestOpen && (
+            <div className="mt-1 ml-6 space-y-1">
+              {testTypes.map(({ value, label, icon: Icon }) => (
+                <button
+                  key={value}
+                  onClick={() => onTestChange(value)}
+                  className={`flex items-center w-full gap-3 px-3 py-2 rounded-md text-sm transition-all duration-200
+                    ${
+                      selectedTest === value
+                        ? "bg-gradient-to-r from-teal-700 to-teal-600 text-white font-medium shadow-sm"
+                        : "text-gray-700 hover:bg-gray-50"
+                    }`}
+                >
+                  <Icon
+                    className={`w-4 h-4 ${
+                      selectedTest === value ? "text-white" : "text-gray-500"
+                    }`}
+                  />
+                  <span
+                    className={`${
+                      selectedTest === value ? "text-white" : "text-gray-700"
+                    }`}
+                  >
+                    {label}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
         </div>
 
-        {/* History */}
-        <button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
-          <FileTextIcon className="w-5 h-5" />
-          <span>History</span>
-        </button>
-
-        {/* Help */}
-        <button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
-          <HelpCircleIcon className="w-5 h-5" />
-          <span>Help</span>
-        </button>
+        {/* --- Divider --- */}
+        <hr className="border-gray-200 my-4" />
+
+        {/* --- Other Options --- */}
+        <div>
+          <button className="w-full flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
+            <FileTextIcon className="w-5 h-5 text-gray-500" />
+            <span>History</span>
+          </button>
+
+          <button className="w-full flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
+            <HelpCircleIcon className="w-5 h-5 text-gray-500" />
+            <span>Help</span>
+          </button>
+        </div>
       </div>
     </aside>
   );
-}
+}