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

Fix sidebar toggle layout in collapsed mode

Browse Source 
Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-02 17:16:56 -08:00
parent 3e0be782c4
commit 1ce4ad4c8b
1 changed files with 53 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 }}>