Create src/components/Sidebar.tsx

src/components/Sidebar.tsx

@@ -0,0 +1,116 @@
+import React, { useState, createContext, useContext } from 'react';
+import { 
+  ChevronFirst, 
+  ChevronLast, 
+  Activity, 
+  Beaker, 
+  BookOpen, 
+  ShieldCheck, 
+  Settings, 
+  LogOut,
+  UserCircle
+} from 'lucide-react';
+import { useOncologyStore } from '../store/useOncologyStore';
+
+const SidebarContext = createContext({ expanded: true });
+
+const Sidebar = () => {
+  const [expanded, setExpanded] = useState(true);
+  const { mutation } = useOncologyStore();
+
+  return (
+    <aside className="h-screen sticky top-0">
+      <nav className={`h-full flex flex-col bg-white border-r border-gray-200 shadow-sm transition-all ${expanded ? 'w-64' : 'w-20'}`}>
+        
+        {/* Header: Branding & Toggle */}
+        <div className="p-4 pb-2 flex justify-between items-center">
+          <div className={`flex items-center gap-2 overflow-hidden transition-all ${expanded ? 'w-40' : 'w-0'}`}>
+            <div className="flex-shrink-0 w-9 h-9 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
+              <ShieldCheck className="text-white" size={20} />
+            </div>
+            <div className="flex flex-col leading-tight">
+              <span className="font-bold text-gray-800 text-sm tracking-tight">ABYSSINIA</span>
+              <span className="text-[10px] font-medium text-blue-600 uppercase tracking-widest">OncoOS V13</span>
+            </div>
+          </div>
+          <button 
+            onClick={() => setExpanded(curr => !curr)}
+            className="p-2 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-500 transition-colors"
+          >
+            {expanded ? <ChevronFirst size={20}/> : <ChevronLast size={20}/>}
+          </button>
+        </div>
+
+        <SidebarContext.Provider value={{ expanded }}>
+          <ul className="flex-1 px-3 mt-6 space-y-2">
+            <SidebarItem icon={<Activity size={20}/>} text="Clinical Hub" active />
+            <SidebarItem icon={<Beaker size={20}/>} text="Trial Matching" alert />
+            <SidebarItem icon={<BookOpen size={20}/>} text="Evidence Library" />
+            
+            <hr className="my-4 border-gray-100" />
+            
+            <p className={`text-[10px] font-bold text-gray-400 uppercase px-3 mb-2 transition-all ${!expanded && 'opacity-0'}`}>
+              System
+            </p>
+            <SidebarItem icon={<Settings size={20}/>} text="Protocols" />
+          </ul>
+        </SidebarContext.Provider>
+
+        {/* Footer: User Profile */}
+        <div className="border-t border-gray-100 p-3 bg-gray-50/50">
+          <div className="flex items-center group cursor-pointer p-2 rounded-xl hover:bg-gray-100 transition-colors">
+            <div className="w-10 h-10 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold">
+              DR
+            </div>
+            <div className={`flex justify-between items-center overflow-hidden transition-all ${expanded ? "w-40 ml-3" : "w-0"}`}>
+              <div className="leading-4">
+                <h4 className="text-xs font-semibold text-gray-800">Dr. Researcher</h4>
+                <p className="text-[10px] text-gray-500">Oncology Lead</p>
+              </div>
+              <LogOut size={16} className="text-gray-400 hover:text-red-500" />
+            </div>
+          </div>
+        </div>
+      </nav>
+    </aside>
+  );
+};
+
+// Sub-component for individual items
+const SidebarItem = ({ icon, text, active = false, alert = false }: any) => {
+  const { expanded } = useContext(SidebarContext);
+  
+  return (
+    <li className={`
+      relative flex items-center py-2.5 px-3 my-1
+      font-medium rounded-xl cursor-pointer
+      transition-all group
+      ${active 
+        ? "bg-blue-50 text-blue-600" 
+        : "text-gray-500 hover:bg-gray-50 hover:text-gray-700"
+      }
+    `}>
+      {icon}
+      <span className={`overflow-hidden transition-all ${expanded ? "w-40 ml-3" : "w-0 opacity-0"}`}>
+        {text}
+      </span>
+      {alert && (
+        <div className={`absolute right-2 w-2 h-2 rounded-full bg-blue-500 ${!expanded && "top-2"}`} />
+      )}
+
+      {!expanded && (
+        <div className={`
+          absolute left-full rounded-md px-2 py-1 ml-6
+          bg-gray-900 text-white text-xs
+          invisible opacity-0 -translate-x-3 transition-all
+          group-hover:visible group-hover:opacity-100 group-hover:translate-x-0
+          z-50 whitespace-nowrap
+        `}>
+          {text}
+        </div>
+      )}
+    </li>
+  );
+};
+
+export default Sidebar;