From 38e72221c9d14964ddfc50ba70c6c80e462540d9 Mon Sep 17 00:00:00 2001 From: kris Date: Fri, 29 Aug 2025 08:45:33 +0000 Subject: [PATCH] Make sidebar reactive: icons visible when collapsed, icons+text when expanded MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- index.html | 14 ++++++------ styles.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 63 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 7b95a66..5475a72 100644 --- a/index.html +++ b/index.html @@ -14,31 +14,31 @@

ETF Tracker