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>

styles.css

@@ -40,9 +40,7 @@ body {
 .sidebar.collapsed .sidebar-header h2,
 .sidebar.collapsed .user-info span,
 .sidebar.collapsed .logout-btn,
-.sidebar.collapsed .sidebar-footer,
-.sidebar.collapsed .menu-icon,
-.sidebar.collapsed .sidebar-menu {
+.sidebar.collapsed .sidebar-footer {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s ease, visibility 0.2s ease;
@@ -51,12 +49,62 @@ body {
 .menu-text,
 .sidebar-header h2,
 .user-info span,
-.logout-btn,
-.menu-icon,
-.sidebar-menu {
+.logout-btn {
     transition: opacity 0.2s ease, visibility 0.2s ease;
 }
 
+.sidebar.collapsed .menu-icon {
+    margin-right: 0;
+    text-align: center;
+    width: 100%;
+    font-size: 1.3rem;
+    transition: all 0.2s ease;
+}
+
+.sidebar.collapsed .menu-item {
+    justify-content: center;
+    padding: 15px 0;
+    margin: 2px 0;
+    position: relative;
+}
+
+.sidebar.collapsed .menu-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.sidebar.collapsed .menu-item:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 70px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 1000;
+    opacity: 0;
+    animation: tooltip-fade-in 0.2s ease-out forwards;
+    pointer-events: none;
+}
+
+@keyframes tooltip-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-50%) translateX(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(-50%) translateX(0);
+    }
+}
+
+.sidebar.collapsed .sidebar-menu {
+    padding: 15px 0;
+}
+
 .sidebar.collapsed .sidebar-header {
     padding: 20px 10px;
 }
@@ -104,6 +152,8 @@ body {
     font-size: 1.2rem;
     width: 20px;
     display: inline-block;
+    text-align: center;
+    transition: all 0.2s ease;
 }
 
 .menu-text {