sidebar: add event delegation

views/servicePages/serviceMain.html

@@ -319,7 +319,7 @@
     <!-- Footer Component -->
     <div id="footer"></div>
 
-    <script src="servicePages/serviceMain.js?v=1.1"></script>
+    <script src="servicePages/serviceMain.js?v=1.2"></script>
     <script src="/components/header/headerLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>

views/servicePages/serviceMain.js

@@ -46,3 +46,34 @@ document.addEventListener("DOMContentLoaded", function () {
   window.addEventListener("scroll", animateOnScroll);
   animateOnScroll();
 });
+
+// SIDEBAR
+document.addEventListener("click", function (e) {
+  const sidebar = document.getElementById("sidebar");
+  const overlay = document.getElementById("sidebarOverlay");
+  const floatingMenuBtn = document.getElementById("floatingMenuBtn");
+
+  if (!sidebar) return;
+
+  const isOpenTrigger =
+    e.target.closest("#floatingMenuBtn") ||
+    e.target.closest(".mobile-menu-btn");
+  const isCloseTrigger =
+    e.target.closest(".close-sidebar") ||
+    e.target.closest("#sidebarOverlay") ||
+    e.target.closest(".sidebar-nav .nav-link");
+
+  if (isOpenTrigger) {
+    sidebar.classList.add("open");
+    overlay.style.display = "block";
+    document.body.style.overflow = "hidden";
+    floatingMenuBtn.style.display = "none";
+  }
+
+  if (isCloseTrigger) {
+    sidebar.classList.remove("open");
+    overlay.style.display = "none";
+    document.body.style.overflow = "";
+    floatingMenuBtn.style.display = "flex";
+  }
+});