feat: add mobile-responsive collapsible sidebar

2026-05-09 18:27:47 +00:00
parent 15401ca7de
commit 57b1c62b2a
7 changed files with 546 additions and 0 deletions
@@ -77,9 +77,66 @@

  .dept-tag { font-size: 12px; color: #475569; }
  .desig-text { font-size: 12px; color: #64748b; }
+
+/* MOBILE RESPONSIVE */
+.sidebar-overlay {
+  display: none;
+  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
+  z-index: 99;
+}
+.hamburger {
+  display: none;
+  background: none; border: none; cursor: pointer;
+  padding: 4px; color: #0f172a;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  .sidebar-overlay.open {
+    display: block;
+  }
+  .main {
+    margin-left: 0 !important;
+  }
+  .hamburger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .search-box {
+    display: none;
+  }
+  .header {
+    padding: 0 16px;
+  }
+  .content {
+    padding: 16px !important;
+  }
+  /* Stack KPI cards on mobile */
+  .kpi-grid, .stats-row {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+  /* Hide less important table columns on mobile */
+  .hide-mobile {
+    display: none !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .kpi-grid, .stats-row {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}
 </style>
 </head>
 <body>
+<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

 <aside class="sidebar">
  <div class="sidebar-logo">
@@ -117,6 +174,11 @@

 <div class="main">
  <header class="header">
+    <button class="hamburger" onclick="toggleSidebar()" aria-label="Toggle menu">
+      <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
+      </svg>
+    </button>
    <div class="header-title">Employee Directory</div>
    <div class="search-box">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
@@ -344,5 +406,21 @@
    </div>
  </div>
 </div>
+<script>
+function toggleSidebar() {
+  document.querySelector('.sidebar').classList.toggle('open');
+  document.getElementById('sidebarOverlay').classList.toggle('open');
+}
+function closeSidebar() {
+  document.querySelector('.sidebar').classList.remove('open');
+  document.getElementById('sidebarOverlay').classList.remove('open');
+}
+// Close sidebar on nav item click (mobile UX)
+document.querySelectorAll('.nav-item').forEach(function(item) {
+  item.addEventListener('click', function() {
+    if (window.innerWidth <= 768) closeSidebar();
+  });
+});
+</script>
 </body>
 </html>