VIBN Frontend for Coolify deployment

components/ui/collapsible-sidebar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface CollapsibleSidebarProps {
+  children: React.ReactNode;
+  className?: string;
+  initialExpanded?: boolean;
+}
+
+export function CollapsibleSidebar({ children, className, initialExpanded = true }: CollapsibleSidebarProps) {
+  const [isExpanded, setIsExpanded] = useState(initialExpanded);
+
+  return (
+    <div 
+      className={cn(
+        "border-r bg-muted/30 transition-all duration-300 relative flex-shrink-0 group",
+        isExpanded ? "w-52" : "w-3 hover:w-4 bg-muted/50 cursor-pointer",
+        className
+      )}
+      onClick={(e) => {
+        if (!isExpanded) setIsExpanded(true);
+      }}
+    >
+      {/* Toggle Button */}
+      {isExpanded && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsExpanded(false);
+          }}
+          className="absolute top-2 right-2 z-20 p-1 hover:bg-background/50 rounded-sm transition-colors"
+          title="Collapse sidebar"
+        >
+          <ChevronLeft className="h-3.5 w-3.5 text-muted-foreground" />
+        </button>
+      )}
+
+      {/* Content Container */}
+      <div className={cn(
+        "h-full overflow-y-auto p-3",
+        isExpanded ? "opacity-100" : "opacity-0 pointer-events-none hidden"
+      )}>
+        {children}
+      </div>
+    </div>
+  );
+}