Make sidebar reactive: icons visible when collapsed, icons+text when expanded

Features:
- Icons remain visible and functional when sidebar is collapsed
- Text labels hidden when collapsed, shown when expanded
- Hover tooltips on collapsed icons show full menu names
- Smooth transitions between collapsed and expanded states
- Enhanced visual feedback with hover effects
- Larger, more prominent icons in collapsed state (1.3rem)
- Proper centering and spacing for collapsed icon navigation

Collapsed State (60px):
- Only icons visible, centered and enlarged
- Hover effects with background highlighting
- Animated tooltips appear on hover showing full names
- Fully functional navigation via icon clicks

Expanded State (260px):
- Icons + text labels both visible
- Normal menu item layout with gaps and spacing
- Full sidebar functionality maintained

User Experience:
- Best of both worlds: minimal space usage + clear navigation
- Tooltips provide context in collapsed state
- Smooth 0.2s transitions for professional feel
- State persistence still maintained via localStorage

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

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

index.html

@@ -14,31 +14,31 @@
                 <h2>ETF Tracker</h2>
             </div>
             <ul class="sidebar-menu">
-                <li class="menu-item active" data-page="dashboard">
+                <li class="menu-item active" data-page="dashboard" data-tooltip="Dashboard">
                     <span class="menu-icon">📊</span>
                     <span class="menu-text">Dashboard</span>
                 </li>
-                <li class="menu-item" data-page="portfolio">
+                <li class="menu-item" data-page="portfolio" data-tooltip="Portfolio">
                     <span class="menu-icon">💼</span>
                     <span class="menu-text">Portfolio</span>
                 </li>
-                <li class="menu-item" data-page="trade-history">
+                <li class="menu-item" data-page="trade-history" data-tooltip="Trade History">
                     <span class="menu-icon">📋</span>
                     <span class="menu-text">Trade History</span>
                 </li>
-                <li class="menu-item" data-page="gains-losses">
+                <li class="menu-item" data-page="gains-losses" data-tooltip="Gains/Losses">
                     <span class="menu-icon">📈</span>
                     <span class="menu-text">Gains/Losses</span>
                 </li>
-                <li class="menu-item menu-separator" data-page="add-trade">
+                <li class="menu-item menu-separator" data-page="add-trade" data-tooltip="Add Trade">
                     <span class="menu-icon">➕</span>
                     <span class="menu-text">Add Trade</span>
                 </li>
-                <li class="menu-item" data-page="cgt-settings">
+                <li class="menu-item" data-page="cgt-settings" data-tooltip="CGT Settings">
                     <span class="menu-icon">🧮</span>
                     <span class="menu-text">CGT Settings</span>
                 </li>
-                <li class="menu-item admin-only" data-page="admin" style="display: none;">
+                <li class="menu-item admin-only" data-page="admin" data-tooltip="Admin Panel" style="display: none;">
                     <span class="menu-icon">👥</span>
                     <span class="menu-text">Admin Panel</span>
                 </li>