Update index.html

index.html

@@ -100,7 +100,7 @@
   </div>
 
   <!-- MOBILE SIDEBAR BACKDROP -->
-  <div id="sidebar-backdrop" onclick="closeMobileSidebar()"></div>
+  <div id="sidebar-backdrop" onclick="closeMobileSidebar()" style="display:none"></div>
 
   <!-- SIDEBAR -->
   <div class="sidebar" id="sidebar">
@@ -267,12 +267,20 @@ function toggleMobileSidebar() {
   const sidebar = document.getElementById('sidebar');
   const backdrop = document.getElementById('sidebar-backdrop');
   const open = sidebar.classList.toggle('open');
-  backdrop.classList.toggle('visible', open);
+  if (open) {
+    backdrop.style.display = 'block';
+    backdrop.classList.add('visible');
+  } else {
+    backdrop.classList.remove('visible');
+    backdrop.style.display = 'none';
+  }
 }
 
 function closeMobileSidebar() {
   document.getElementById('sidebar').classList.remove('open');
-  document.getElementById('sidebar-backdrop').classList.remove('visible');
+  const backdrop = document.getElementById('sidebar-backdrop');
+  backdrop.classList.remove('visible');
+  backdrop.style.display = 'none';
 }
 
 // Show/hide hamburger based on screen size