feat: sidebar collapse on logo click

- Click the sidebar logo to collapse/expand sidebar
- Collapsed mode shows only icons (60px width)
- Logo image remains visible, text hidden
- Nav items show only SVG icons, text hidden via font-size:0
- User avatar visible, name/email hidden
- Resizer disabled in collapsed mode
- State persisted in localStorage (zh_sidebar_collapsed)
- Restores previous width on expand

Author: ddrayko

public/css/style.css

@@ -488,6 +488,67 @@ cap-widget {
   background: var(--accent-1);
 }
 
+.sidebar.collapsed {
+  width: 60px;
+}
+
+.sidebar.collapsed .sidebar-resizer {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-logo {
+  justify-content: center;
+}
+
+.sidebar.collapsed .sidebar-logo-text {
+  display: none;
+}
+
+.sidebar.collapsed .sidebar-header {
+  padding: 16px 12px;
+  justify-content: center;
+}
+
+.sidebar.collapsed .sidebar-nav {
+  padding: 12px 8px;
+}
+
+.sidebar.collapsed .nav-section-label {
+  display: none;
+}
+
+.sidebar.collapsed .nav-item {
+  font-size: 0;
+  justify-content: center;
+  padding: 10px 0;
+  gap: 0;
+}
+
+.sidebar.collapsed .nav-item svg {
+  font-size: 1rem;
+  width: 20px;
+  height: 20px;
+}
+
+.sidebar.collapsed .sidebar-footer {
+  padding: 8px 0;
+}
+
+.sidebar.collapsed .user-info {
+  justify-content: center;
+  padding: 8px 0;
+}
+
+.sidebar.collapsed .user-name,
+.sidebar.collapsed .user-email,
+.sidebar.collapsed .sidebar-footer > div:last-child {
+  display: none;
+}
+
+.sidebar.collapsed ~ .main-content {
+  margin-left: 60px;
+}
+
 .main-content {
   position: relative;
   z-index: 1;

public/js/app.js

@@ -360,13 +360,18 @@ function initSidebarResize() {
   const resizer = $('#sidebar-resizer');
   if (!sidebar || !resizer) return;
 
-  const saved = localStorage.getItem('zh_sidebar_width');
-  if (saved) {
-    const w = parseInt(saved, 10);
-    if (w >= 180 && w <= 600) {
-      sidebar.style.width = w + 'px';
-      sidebar.style.setProperty('--sidebar-w', w + 'px');
-      document.querySelector('.main-content').style.marginLeft = w + 'px';
+  if (localStorage.getItem('zh_sidebar_collapsed') === 'true') {
+    sidebar.classList.add('collapsed');
+    document.querySelector('.main-content').style.marginLeft = '';
+  } else {
+    const saved = localStorage.getItem('zh_sidebar_width');
+    if (saved) {
+      const w = parseInt(saved, 10);
+      if (w >= 180 && w <= 600) {
+        sidebar.style.width = w + 'px';
+        sidebar.style.setProperty('--sidebar-w', w + 'px');
+        document.querySelector('.main-content').style.marginLeft = w + 'px';
+      }
     }
   }
 
@@ -400,6 +405,23 @@ function initSidebarResize() {
   resizer.addEventListener('mousedown', onMouseDown);
 }
 
+function toggleSidebarCollapse() {
+  const sidebar = $('#sidebar');
+  const isCollapsed = sidebar.classList.toggle('collapsed');
+  localStorage.setItem('zh_sidebar_collapsed', isCollapsed);
+  const main = document.querySelector('.main-content');
+  if (isCollapsed) {
+    sidebar.dataset.prevWidth = sidebar.style.width || getComputedStyle(sidebar).width;
+    sidebar.style.width = '';
+    main.style.marginLeft = '';
+  } else {
+    const prev = sidebar.dataset.prevWidth || localStorage.getItem('zh_sidebar_width') || '260';
+    sidebar.style.width = prev;
+    sidebar.style.setProperty('--sidebar-w', prev);
+    main.style.marginLeft = prev;
+  }
+}
+
 // ===== DASHBOARD =====
 async function renderDashboard() {
   const app = $('#app');
@@ -505,6 +527,11 @@ async function renderDashboard() {
     navigateTo('account');
   });
 
+  $('#sidebar-logo-link').addEventListener('click', (e) => {
+    e.preventDefault();
+    toggleSidebarCollapse();
+  });
+
   $('#hamburger-toggle').addEventListener('click', () => {
     $('#sidebar').classList.toggle('open');
   });