From 1ce4ad4c8b378f719d535a6528731b493b9e37d6 Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Mon, 2 Mar 2026 17:16:56 -0800
Subject: [PATCH] Fix sidebar toggle layout in collapsed mode

Made-with: Cursor
---
 components/layout/vibn-sidebar.tsx | 102 +++++++++++++++--------------
 1 file changed, 53 insertions(+), 49 deletions(-)

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