From 57b1c62b2a5947db8badd2108d03f42563767468 Mon Sep 17 00:00:00 2001 From: TenX PM Date: Sat, 9 May 2026 18:27:47 +0000 Subject: [PATCH] feat: add mobile-responsive collapsible sidebar --- 02-admin-dashboard.html | 78 ++++++++++++++++++++++++++++++++++++++ 03-employee-list.html | 78 ++++++++++++++++++++++++++++++++++++++ 04-leave-management.html | 78 ++++++++++++++++++++++++++++++++++++++ 05-payroll.html | 78 ++++++++++++++++++++++++++++++++++++++ 06-attendance.html | 78 ++++++++++++++++++++++++++++++++++++++ 07-recruitment.html | 78 ++++++++++++++++++++++++++++++++++++++ 08-employee-dashboard.html | 78 ++++++++++++++++++++++++++++++++++++++ 7 files changed, 546 insertions(+) diff --git a/02-admin-dashboard.html b/02-admin-dashboard.html index 66286ae..9df543a 100644 --- a/02-admin-dashboard.html +++ b/02-admin-dashboard.html @@ -205,9 +205,66 @@ } .full-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } + +/* 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; + } +} +