mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make sidebar collapse toggle more prominent

Browse Source 
Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-02 17:13:54 -08:00
parent 11d6f14645
commit 3e0be782c4
1 changed files with 18 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/layout/vibn-sidebar.tsx
View File

@@ -99,7 +99,7 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
{/* Logo row */}
<div style={{
padding: collapsed ? "20px 0" : "22px 18px 18px",
padding: collapsed ? "16px 10px" : "16px 12px 16px 18px",
display: "flex",
alignItems: "center",
justifyContent: collapsed ? "center" : "space-between",
@@ -126,42 +126,29 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
)}
</Link>
{/* Collapse toggle — only visible in expanded mode, or as a tiny button in collapsed */}
{!collapsed && (
<button
onClick={toggle}
title="Collapse sidebar"
style={{
background: "none", border: "none", cursor: "pointer",
color: "#c5c0b8", padding: "4px 6px", borderRadius: 5,
fontSize: "0.75rem", lineHeight: 1, flexShrink: 0,
transition: "color 0.12s",
}}
onMouseEnter={e => (e.currentTarget.style.color = "#6b6560")}
onMouseLeave={e => (e.currentTarget.style.color = "#c5c0b8")}
>
‹‹
</button>
)}
</div>
{/* Expand button shown in collapsed mode */}
{collapsed && (
{/* Collapse / expand toggle */}
<button
onClick={toggle}
title="Expand sidebar"
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
style={{
background: "none", border: "none", cursor: "pointer",
color: "#c5c0b8", fontSize: "0.7rem", lineHeight: 1,
padding: "4px 0 8px", width: "100%", textAlign: "center",
transition: "color 0.12s", flexShrink: 0,
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");
}}
onMouseEnter={e => (e.currentTarget.style.color = "#6b6560")}
onMouseLeave={e => (e.currentTarget.style.color = "#c5c0b8")}
>
››
{collapsed ? "›" : "‹"}
</button>
)}
</div>
{/* Top nav */}
<div style={{ padding: collapsed ? "4px 8px" : "4px 10px", flexShrink: 0 }}>