Add collapsible sidebar menu functionality

Features:
- Sidebar can now be collapsed to save screen space (260px → 60px)
- Collapse button integrated directly into sidebar header
- Smooth animations for expand/collapse transitions
- State persistence using localStorage (remembers user preference)
- Responsive design - collapse feature disabled on mobile devices
- Visual feedback with hover effects and rotation animation
- Icons remain visible when collapsed for easy navigation
- Seamless integration with existing mobile sidebar toggle

User Experience:
- Click the "‹" button in sidebar to collapse
- Click "›" button to expand back to full width
- User preference is saved and restored on page reload
- Main content area automatically adjusts width
- Smooth 0.3s transition animations for professional feel
- Tooltips show current state (Collapse/Expand sidebar)

Technical Implementation:
- CSS transitions for smooth animations
- JavaScript event handling with localStorage persistence
- Responsive CSS media queries for mobile compatibility
- Graceful degradation on smaller screens
- Clean separation of desktop vs mobile behavior

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

This commit is contained in:

kris

2025-08-28 20:37:57 +00:00

co-authored by

Claude

parent 31a02a69ac

commit 8f141beef5

3 changed files with 135 additions and 6 deletions

									
										index.html
									
		+1
		
												View File
												
				@@ -9,6 +9,7 @@

				<body>

				    <div class="app-container">

				        <nav class="sidebar">

				            <button class="sidebar-collapse-btn" id="sidebar-collapse-btn" title="Collapse sidebar">‹</button>

				            <div class="sidebar-header">

				                <h2>ETF Tracker</h2>

				            </div>