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;
+  }
+}
 </style>
 </head>
 <body>
+<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
 
 <!-- SIDEBAR -->
 <aside class="sidebar">
@@ -287,6 +344,11 @@
 <!-- MAIN -->
 <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">Dashboard</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>
@@ -532,5 +594,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>
diff --git a/03-employee-list.html b/03-employee-list.html
index a30e1c3..12b6005 100644
--- a/03-employee-list.html
+++ b/03-employee-list.html
@@ -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>
diff --git a/04-leave-management.html b/04-leave-management.html
index 5e11964..8be8bdf 100644
--- a/04-leave-management.html
+++ b/04-leave-management.html
@@ -92,9 +92,66 @@
   .panel-btn-reject { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
   .panel-btn-reject:hover { background: #fee2e2; }
   .days-badge { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; }
+
+/* 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">
     <div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
@@ -123,6 +180,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">Leave Management</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><input type="text" placeholder="Search leaves..."></div>
     <div style="display:flex;align-items:center;gap:8px">
@@ -274,5 +336,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>
diff --git a/05-payroll.html b/05-payroll.html
index 90ddcff..b7d57b1 100644
--- a/05-payroll.html
+++ b/05-payroll.html
@@ -77,9 +77,66 @@
   .btn-payslip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; font-family: inherit; white-space: nowrap; }
   .btn-payslip:hover { background: #dbeafe; }
   .total-row td { background: #f8fafc !important; font-weight: 700; border-top: 2px solid #e2e8f0; }
+
+/* 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">
     <div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
@@ -108,6 +165,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">Payroll Processing</div>
     <div style="display:flex;align-items:center;gap:8px">
       <div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
@@ -323,5 +385,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>
diff --git a/06-attendance.html b/06-attendance.html
index fdcc4a0..58213dc 100644
--- a/06-attendance.html
+++ b/06-attendance.html
@@ -104,9 +104,66 @@
   .legend-label { font-size: 11px; }
   .legend-cells { display: flex; gap: 4px; }
   .legend-cell { width: 16px; height: 16px; border-radius: 3px; }
+
+/* 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">
     <div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
@@ -135,6 +192,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">Attendance</div>
     <div style="display:flex;align-items:center;gap:8px">
       <div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
@@ -383,5 +445,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>
diff --git a/07-recruitment.html b/07-recruitment.html
index 906c515..b591314 100644
--- a/07-recruitment.html
+++ b/07-recruitment.html
@@ -87,9 +87,66 @@
 
   .add-card { border: 2px dashed #e2e8f0; border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
   .add-card:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
+
+/* 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">
     <div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
@@ -118,6 +175,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">Recruitment</div>
     <div style="display:flex;align-items:center;gap:8px">
       <div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
@@ -381,5 +443,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>
diff --git a/08-employee-dashboard.html b/08-employee-dashboard.html
index 3e198fe..b7235f1 100644
--- a/08-employee-dashboard.html
+++ b/08-employee-dashboard.html
@@ -98,9 +98,66 @@
   .perf-cat-score { font-size: 12px; font-weight: 700; color: #0f172a; width: 30px; text-align: right; flex-shrink: 0; }
 
   .bottom-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;
+  }
+}
 </style>
 </head>
 <body>
+<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
 
 <aside class="sidebar">
   <div class="sidebar-logo">
@@ -134,6 +191,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">My Dashboard</div>
     <div style="display:flex;align-items:center;gap:10px">
       <div class="icon-btn">
@@ -352,5 +414,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>
