sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move sidebar collapse toggle to floating edge button

Browse source 
Previously sat as an inline button below the nav items, disconnected
from the rest of the layout. Now it's a small circle straddling the
sidebar/content boundary, vertically centered on the viewport - the
common pattern for collapsible side panels.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
This commit is contained in:
Claude 2026-06-18 16:02:42 +00:00
parent 1cbc1dab40
commit b97a14a682
No known key found for this signature in database
1 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/Sidebar.tsx
View file

@ -31,6 +31,26 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
className="fixed left-0 top-0 z-50 h-screen overflow-hidden flex flex-col py-6" className="fixed left-0 top-0 z-50 h-screen overflow-hidden flex flex-col py-6"
style={{ width: `${width}px`, backgroundColor: '#0A0B0D' }} style={{ width: `${width}px`, backgroundColor: '#0A0B0D' }}
> >
{/* Collapse Toggle — floating on the sidebar/content edge, vertically centered */}
<button
onClick={onToggle}
className="fixed top-1/2 z-50 flex items-center justify-center rounded-full cursor-pointer transition-colors"
style={{
left: `${width - 11}px`,
transform: 'translateY(-50%)',
width: '22px',
height: '22px',
border: '1px solid rgba(200,164,52,0.25)',
backgroundColor: '#15161A',
color: '#7A7D85',
boxShadow: '0 0 8px rgba(0,0,0,0.4)',
}}
onMouseEnter={(e) => { e.currentTarget.style.color = '#C8A434'; e.currentTarget.style.borderColor = 'rgba(200,164,52,0.5)' }}
onMouseLeave={(e) => { e.currentTarget.style.color = '#7A7D85'; e.currentTarget.style.borderColor = 'rgba(200,164,52,0.25)' }}
>
{collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
</button>
{/* Logo — prominent, centered at top. Blend mode hides the baked-in {/* Logo — prominent, centered at top. Blend mode hides the baked-in
dark background of the source PNG so only the gold arc shows. */} dark background of the source PNG so only the gold arc shows. */}
<div className="flex flex-col items-center mb-10" style={{ paddingTop: '4px' }}> <div className="flex flex-col items-center mb-10" style={{ paddingTop: '4px' }}>
@ -84,15 +104,6 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
})} })}
</nav> </nav>
{/* Collapse Toggle */}
<button
onClick={onToggle}
className="p-1.5 rounded cursor-pointer bg-transparent transition-colors self-center"
style={{ border: '1px solid #1E2025', color: '#7A7D85', marginBottom: '12px' }}
>
{collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
</button>
{/* System Status — rounded block, fits inside nav with breathing room */} {/* System Status — rounded block, fits inside nav with breathing room */}
<div style={{ width: '100%', padding: '0 12px 16px 12px' }}> <div style={{ width: '100%', padding: '0 12px 16px 12px' }}>
<div <div