From 8f141beef5b657aa980c3690de5ba07b185319f5 Mon Sep 17 00:00:00 2001 From: kris Date: Thu, 28 Aug 2025 20:37:57 +0000 Subject: [PATCH] Add collapsible sidebar menu functionality MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- index.html | 1 + script.js | 44 +++++++++++++++++++++++++ styles.css | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 135 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index bb50d88..7b95a66 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@