xpltdco/tubearr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(S04/T01): Moved sidebar collapse toggle from nav bottom into brand…

Browse source 
- src/frontend/src/components/Sidebar.tsx
This commit is contained in:
John Lightner 2026-03-24 21:02:35 -05:00
parent bd06792645
commit 436c19fca1
1 changed files with 40 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/frontend/src/components/Sidebar.tsx
View file

@ -59,13 +59,49 @@ export function Sidebar() {
height: 'var(--header-height)',
display: 'flex',
alignItems: 'center',
padding: collapsed ? '0 var(--space-3)' : '0 var(--space-4)',
padding: collapsed ? '0 var(--space-1)' : '0 var(--space-4)',
borderBottom: '1px solid var(--border)',
gap: 'var(--space-2)',
justifyContent: collapsed ? 'center' : 'flex-start',
gap: collapsed ? '2px' : 'var(--space-2)',
}}
>
<NavLink
to="/"
aria-label="Go to Channels"
style={{
textDecoration: 'none',
color: 'inherit',
display: 'flex',
alignItems: 'center',
}}
>
<TubearrLogo collapsed={collapsed} />
</NavLink>
<button
onClick={() => setCollapsed(!collapsed)}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 'var(--space-1)',
borderRadius: 'var(--radius-md)',
color: 'var(--text-muted)',
cursor: 'pointer',
transition: 'color var(--transition-fast), background-color var(--transition-fast)',
marginLeft: 'auto',
flexShrink: 0,
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = 'var(--text-secondary)';
e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-muted)';
e.currentTarget.style.backgroundColor = 'transparent';
}}
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
</button>
</div>
{/* Nav links */}
@ -105,34 +141,6 @@ export function Sidebar() {
</NavLink>
))}
</div>
{/* Collapse toggle */}
<button
onClick={() => setCollapsed(!collapsed)}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-3)',
margin: 'var(--space-2)',
borderRadius: 'var(--radius-md)',
color: 'var(--text-muted)',
cursor: 'pointer',
transition: 'color var(--transition-fast)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = 'var(--text-secondary)';
e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-muted)';
e.currentTarget.style.backgroundColor = 'transparent';
}}
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
</button>
</nav>
);
}