Update components/Sidebar.tsx

components/Sidebar.tsx

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { LAYER_DEFINITIONS } from '../constants';
 import { LayerType } from '../types';
-import { Box, Sparkles, LayoutTemplate, Circle, Search, X } from 'lucide-react';
+import { Box, Sparkles, LayoutTemplate, Circle, Search, X, ChevronLeft, ChevronRight } from 'lucide-react';
 
 interface SidebarProps {
   onOpenAIBuilder: () => void;
@@ -12,6 +12,7 @@ interface SidebarProps {
 
 const Sidebar: React.FC<SidebarProps> = ({ onOpenAIBuilder, onSelectTemplate, isConnected }) => {
   const [searchQuery, setSearchQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(true);
 
   const onDragStart = (event: React.DragEvent, layerType: LayerType) => {
     event.dataTransfer.setData('application/reactflow', layerType);
@@ -19,7 +20,13 @@ const Sidebar: React.FC<SidebarProps> = ({ onOpenAIBuilder, onSelectTemplate, is
   };
 
   const categories = Array.from(new Set(Object.values(LAYER_DEFINITIONS).map(l => l.category)));
-  const categoryOrder = ['Core', 'Convolution', 'Recurrent', 'Transformer', 'Normalization', 'GenAI', 'Utility', 'Merge'];
+  const categoryOrder = [
+    'Core', 'Convolution', 'Recurrent', 'Transformer', 'Normalization', 'GenAI', 
+    'Video', 'Audio', '3D', 'Detection', 'OCR', 'Robotics', 
+    'Graph', 'Physics', 'Spiking', 'RL', 'Advanced', 
+    'Utility', 'Merge'
+  ];
+  
   categories.sort((a, b) => {
     const idxA = categoryOrder.indexOf(a);
     const idxB = categoryOrder.indexOf(b);
@@ -35,124 +42,136 @@ const Sidebar: React.FC<SidebarProps> = ({ onOpenAIBuilder, onSelectTemplate, is
   );
 
   return (
-    <aside className="w-64 bg-slate-900 border-r border-slate-800 flex flex-col h-full z-10">
-      <div className="p-4 border-b border-slate-800 bg-slate-900 space-y-4">
-        <div>
-          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">
-            Architecture Agents
-          </h1>
-          <p className="text-xs text-slate-500 mt-1">AI-Powered Model Builder</p>
-        </div>
-        
-        <div className="grid grid-cols-2 gap-2">
-          <button 
-            onClick={onOpenAIBuilder}
-            className="flex flex-col items-center justify-center p-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-lg text-purple-300 transition-colors group"
-          >
-            <Sparkles size={18} className="mb-1 group-hover:scale-110 transition-transform" />
-            <span className="text-[10px] font-bold">AI Builder</span>
-          </button>
-          <button 
-            onClick={() => onSelectTemplate('menu')}
-            className="flex flex-col items-center justify-center p-2 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded-lg text-blue-300 transition-colors group"
-          >
-            <LayoutTemplate size={18} className="mb-1 group-hover:scale-110 transition-transform" />
-            <span className="text-[10px] font-bold">Templates</span>
-          </button>
-        </div>
+    <aside className={`${isOpen ? 'w-64 border-r' : 'w-0 border-none'} bg-slate-900 border-slate-800 flex flex-col h-full z-20 transition-all duration-300 relative`}>
+      {/* Toggle Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="absolute -right-3 top-6 bg-slate-800 border border-slate-700 text-slate-400 p-0.5 rounded-full hover:text-white hover:bg-slate-700 cursor-pointer z-50 w-6 h-6 flex items-center justify-center shadow-md transition-transform"
+        title={isOpen ? "Collapse Sidebar" : "Expand Sidebar"}
+      >
+        {isOpen ? <ChevronLeft size={14} /> : <ChevronRight size={14} />}
+      </button>
 
-        {/* Search Bar */}
-        <div className="relative">
-          <Search className="absolute left-3 top-2.5 text-slate-500" size={14} />
-          <input 
-            type="text" 
-            placeholder="Search layers..." 
-            className="w-full bg-slate-950 border border-slate-700 rounded-lg pl-9 pr-8 py-2 text-xs text-slate-200 focus:outline-none focus:border-blue-500 transition-colors placeholder-slate-600"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-          {searchQuery && (
+      {/* Content Container */}
+      <div className={`flex flex-col h-full overflow-hidden ${!isOpen ? 'invisible opacity-0' : 'visible opacity-100'} transition-opacity duration-200`}>
+        <div className="p-4 border-b border-slate-800 bg-slate-900 space-y-4 min-w-[16rem]">
+          <div>
+            <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">
+              Architecture Agents
+            </h1>
+            <p className="text-xs text-slate-500 mt-1">AI-Powered Model Builder</p>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-2">
             <button 
-              onClick={() => setSearchQuery('')}
-              className="absolute right-2 top-2 text-slate-500 hover:text-slate-300"
+              onClick={onOpenAIBuilder}
+              className="flex flex-col items-center justify-center p-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-lg text-purple-300 transition-colors group"
             >
-              <X size={14} />
+              <Sparkles size={18} className="mb-1 group-hover:scale-110 transition-transform" />
+              <span className="text-[10px] font-bold">AI Builder</span>
             </button>
-          )}
+            <button 
+              onClick={() => onSelectTemplate('menu')}
+              className="flex flex-col items-center justify-center p-2 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded-lg text-blue-300 transition-colors group"
+            >
+              <LayoutTemplate size={18} className="mb-1 group-hover:scale-110 transition-transform" />
+              <span className="text-[10px] font-bold">Templates</span>
+            </button>
+          </div>
+
+          {/* Search Bar */}
+          <div className="relative">
+            <Search className="absolute left-3 top-2.5 text-slate-500" size={14} />
+            <input 
+              type="text" 
+              placeholder="Search layers..." 
+              className="w-full bg-slate-950 border border-slate-700 rounded-lg pl-9 pr-8 py-2 text-xs text-slate-200 focus:outline-none focus:border-blue-500 transition-colors placeholder-slate-600"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+            {searchQuery && (
+              <button 
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2 top-2 text-slate-500 hover:text-slate-300"
+              >
+                <X size={14} />
+              </button>
+            )}
+          </div>
         </div>
-      </div>
-      
-      <div className="flex-1 overflow-y-auto p-4 space-y-6 scrollbar-thin scrollbar-thumb-slate-700">
         
-        {searchQuery ? (
-          // Search Results View
-          <div className="space-y-2">
-            <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3">
-              Search Results ({filteredLayers.length})
-            </h3>
-            {filteredLayers.length > 0 ? (
-              filteredLayers.map(layer => (
-                <div
-                  key={layer.type}
-                  className="bg-slate-800 hover:bg-slate-750 p-3 rounded border border-slate-700 cursor-grab active:cursor-grabbing transition-colors group relative overflow-hidden"
-                  onDragStart={(event) => onDragStart(event, layer.type)}
-                  draggable
-                >
-                  <div className="flex items-center gap-3 relative z-10">
-                    <div className={`p-1.5 rounded transition-colors group-hover:bg-slate-900 bg-slate-900/50`}>
-                      <Box size={14} className="text-slate-400 group-hover:text-blue-400" />
-                    </div>
-                    <div>
-                      <div className="text-sm font-medium text-slate-200 group-hover:text-white">{layer.label}</div>
-                      <div className="text-xs text-slate-500 leading-tight group-hover:text-slate-400 line-clamp-2">{layer.description}</div>
+        <div className="flex-1 overflow-y-auto p-4 space-y-6 scrollbar-thin scrollbar-thumb-slate-700 min-w-[16rem]">
+          
+          {searchQuery ? (
+            // Search Results View
+            <div className="space-y-2">
+              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3">
+                Search Results ({filteredLayers.length})
+              </h3>
+              {filteredLayers.length > 0 ? (
+                filteredLayers.map(layer => (
+                  <div
+                    key={layer.type}
+                    className="bg-slate-800 hover:bg-slate-750 p-3 rounded border border-slate-700 cursor-grab active:cursor-grabbing transition-colors group relative overflow-hidden"
+                    onDragStart={(event) => onDragStart(event, layer.type)}
+                    draggable
+                  >
+                    <div className="flex items-center gap-3 relative z-10">
+                      <div className={`p-1.5 rounded transition-colors group-hover:bg-slate-900 bg-slate-900/50`}>
+                        <Box size={14} className="text-slate-400 group-hover:text-blue-400" />
+                      </div>
+                      <div>
+                        <div className="text-sm font-medium text-slate-200 group-hover:text-white">{layer.label}</div>
+                        <div className="text-xs text-slate-500 leading-tight group-hover:text-slate-400 line-clamp-2">{layer.description}</div>
+                      </div>
                     </div>
                   </div>
+                ))
+              ) : (
+                <div className="text-center text-slate-500 py-8 text-xs italic">
+                  No layers found matching "{searchQuery}"
                 </div>
-              ))
-            ) : (
-              <div className="text-center text-slate-500 py-8 text-xs italic">
-                No layers found matching "{searchQuery}"
-              </div>
-            )}
-          </div>
-        ) : (
-          // Categorized View
-          categories.map(category => (
-            <div key={category}>
-              <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2">
-                {category}
-                <div className="h-px flex-1 bg-slate-800"></div>
-              </h3>
-              <div className="grid grid-cols-1 gap-2">
-                {Object.values(LAYER_DEFINITIONS)
-                  .filter(l => l.category === category)
-                  .map(layer => (
-                    <div
-                      key={layer.type}
-                      className="bg-slate-800 hover:bg-slate-750 p-3 rounded border border-slate-700 cursor-grab active:cursor-grabbing transition-colors group relative overflow-hidden"
-                      onDragStart={(event) => onDragStart(event, layer.type)}
-                      draggable
-                    >
-                      <div className="flex items-center gap-3 relative z-10">
-                        <div className={`p-1.5 rounded transition-colors group-hover:bg-slate-900 bg-slate-900/50`}>
-                          <Box size={14} className="text-slate-400 group-hover:text-blue-400" />
-                        </div>
-                        <div>
-                          <div className="text-sm font-medium text-slate-200 group-hover:text-white">{layer.label}</div>
-                          <div className="text-xs text-slate-500 leading-tight group-hover:text-slate-400">{layer.description}</div>
+              )}
+            </div>
+          ) : (
+            // Categorized View
+            categories.map(category => (
+              <div key={category}>
+                <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2">
+                  {category}
+                  <div className="h-px flex-1 bg-slate-800"></div>
+                </h3>
+                <div className="grid grid-cols-1 gap-2">
+                  {Object.values(LAYER_DEFINITIONS)
+                    .filter(l => l.category === category)
+                    .map(layer => (
+                      <div
+                        key={layer.type}
+                        className="bg-slate-800 hover:bg-slate-750 p-3 rounded border border-slate-700 cursor-grab active:cursor-grabbing transition-colors group relative overflow-hidden"
+                        onDragStart={(event) => onDragStart(event, layer.type)}
+                        draggable
+                      >
+                        <div className="flex items-center gap-3 relative z-10">
+                          <div className={`p-1.5 rounded transition-colors group-hover:bg-slate-900 bg-slate-900/50`}>
+                            <Box size={14} className="text-slate-400 group-hover:text-blue-400" />
+                          </div>
+                          <div>
+                            <div className="text-sm font-medium text-slate-200 group-hover:text-white">{layer.label}</div>
+                            <div className="text-xs text-slate-500 leading-tight group-hover:text-slate-400">{layer.description}</div>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))}
+                    ))}
+                </div>
               </div>
-            </div>
-          ))
-        )}
-      </div>
-      
-      <div className="p-4 border-t border-slate-800 text-[10px] text-slate-500 text-center flex items-center justify-center gap-2">
-         <span>v1.2.0 • Powered by Gemini 2.5</span>
-         <Circle size={8} className={isConnected ? "fill-emerald-500 text-emerald-500" : "fill-red-500 text-red-500"} />
+            ))
+          )}
+        </div>
+        
+        <div className="p-4 border-t border-slate-800 text-[10px] text-slate-500 text-center flex items-center justify-center gap-2 min-w-[16rem]">
+           <span>v1.2.0 • Powered by Gemini 2.5</span>
+           <Circle size={8} className={isConnected ? "fill-emerald-500 text-emerald-500" : "fill-red-500 text-red-500"} />
+        </div>
       </div>
     </aside>
   );