Fix sidebar toggle layout in collapsed mode

Made-with: Cursor

components/layout/vibn-sidebar.tsx

@@ -97,58 +97,62 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
       position: "relative",
     }}>
 
-      {/* Logo row */}
+      {/* Logo + toggle row */}
-      <div style={{
+      {collapsed ? (
-        padding: collapsed ? "16px 10px" : "16px 12px 16px 18px",
+        /* Collapsed: logo centered, toggle below it */
-        display: "flex",
+        <div style={{ flexShrink: 0 }}>
-        alignItems: "center",
+          <div style={{ display: "flex", justifyContent: "center", padding: "16px 0 8px" }}>
-        justifyContent: collapsed ? "center" : "space-between",
+            <Link href={`/${workspace}/projects`} title="VIBN" style={{ textDecoration: "none" }}>
-        gap: 9,
+              <div style={{ width: 28, height: 28, borderRadius: 7, overflow: "hidden" }}>
-        transition: "padding 0.2s",
+                <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
-        flexShrink: 0,
+              </div>
-      }}>
+            </Link>
-        <Link
+          </div>
-          href={`/${workspace}/projects`}
+          <div style={{ display: "flex", justifyContent: "center", paddingBottom: 8 }}>
-          style={{ display: "flex", alignItems: "center", gap: 9, textDecoration: "none" }}
+            <button
-          title="VIBN"
+              onClick={toggle}
+              title="Expand sidebar"
+              style={{
+                background: "#f0ece4", border: "none", cursor: "pointer",
+                color: "#6b6560", width: 28, height: 22, borderRadius: 5,
+                display: "flex", alignItems: "center", justifyContent: "center",
+                fontSize: "0.82rem", fontWeight: 700, transition: "background 0.12s, color 0.12s",
+              }}
+              onMouseEnter={e => { (e.currentTarget.style.background = "#e0dcd4"); (e.currentTarget.style.color = "#1a1a1a"); }}
+              onMouseLeave={e => { (e.currentTarget.style.background = "#f0ece4"); (e.currentTarget.style.color = "#6b6560"); }}
             >
+              ›
+            </button>
+          </div>
+        </div>
+      ) : (
+        /* Expanded: logo + name on left, toggle on right */
+        <div style={{ padding: "16px 12px 16px 18px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 9, flexShrink: 0 }}>
+          <Link href={`/${workspace}/projects`} style={{ display: "flex", alignItems: "center", gap: 9, textDecoration: "none", minWidth: 0 }}>
             <div style={{ width: 28, height: 28, borderRadius: 7, overflow: "hidden", flexShrink: 0 }}>
               <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
             </div>
-          {!collapsed && (
+            <span style={{ fontSize: "0.95rem", fontWeight: 600, color: "#1a1a1a", letterSpacing: "-0.03em", fontFamily: "Newsreader, serif", whiteSpace: "nowrap" }}>
-            <span style={{
-              fontSize: "0.95rem", fontWeight: 600, color: "#1a1a1a",
-              letterSpacing: "-0.03em", fontFamily: "Newsreader, serif",
-              whiteSpace: "nowrap", overflow: "hidden",
-            }}>
               vibn
             </span>
-          )}
           </Link>
-
-        {/* Collapse / expand toggle */}
           <button
             onClick={toggle}
-          title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            title="Collapse sidebar"
             style={{
               background: "#f0ece4", border: "none", cursor: "pointer",
-            color: "#6b6560", width: 26, height: 26, borderRadius: 6,
+              color: "#6b6560", width: 26, height: 24, borderRadius: 5,
               display: "flex", alignItems: "center", justifyContent: "center",
-            fontSize: "0.78rem", flexShrink: 0, transition: "background 0.12s, color 0.12s",
+              fontSize: "0.82rem", fontWeight: 700, flexShrink: 0,
-            fontWeight: 600,
+              transition: "background 0.12s, color 0.12s",
-          }}
-          onMouseEnter={e => {
-            (e.currentTarget.style.background = "#e8e4dc");
-            (e.currentTarget.style.color = "#1a1a1a");
-          }}
-          onMouseLeave={e => {
-            (e.currentTarget.style.background = "#f0ece4");
-            (e.currentTarget.style.color = "#6b6560");
             }}
+            onMouseEnter={e => { (e.currentTarget.style.background = "#e0dcd4"); (e.currentTarget.style.color = "#1a1a1a"); }}
+            onMouseLeave={e => { (e.currentTarget.style.background = "#f0ece4"); (e.currentTarget.style.color = "#6b6560"); }}
           >
-          {collapsed ? "›" : "‹"}
+            ‹
           </button>
         </div>
+      )}
 
       {/* Top nav */}
       <div style={{ padding: collapsed ? "4px 8px" : "4px 10px", flexShrink: 0 }}>