sidebar: add event delegation

views/aboutPages/aboutMain.html

@@ -308,7 +308,7 @@
 
     <!-- Scripts -->
     <script src="/components/header/headerLoader.js"></script>
-    <script src="aboutPages/aboutMain.js?v=1.1"></script>
+    <script src="aboutPages/aboutMain.js?v=1.2"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>
 </html>

views/aboutPages/aboutMain.js

@@ -1 +1,31 @@
 // views/aboutPages/aboutMain.js
+// 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";
+  }
+});

views/contactPages/contactMain.html

@@ -198,6 +198,6 @@
     <!-- Scripts -->
     <script src="/components/header/headerLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
-    <script src="contactPages/contactMain.js?v=1.0"></script>
+    <script src="contactPages/contactMain.js?v=1.1"></script>
   </body>
 </html>

views/contactPages/contactMain.js

@@ -198,3 +198,34 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 });
+
+// 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";
+  }
+});

views/homePages/homeMain.html

@@ -601,7 +601,7 @@
     <!-- Footer Component -->
     <div id="footer"></div>
 
-    <script src="homePages/homeMain.js?v=1.2"></script>
+    <script src="homePages/homeMain.js?v=1.3"></script>
     <script src="/components/header/headerLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>

views/homePages/homeMain.js

@@ -119,3 +119,34 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
+
+// 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";
+  }
+});

views/newsPages/newsMain/newsMain.html

@@ -277,7 +277,7 @@
     <!-- Footer Component -->
     <div id="footer"></div>
 
-    <script src="newsPages/newsMain/newsMain.js?v=1.0"></script>
+    <script src="newsPages/newsMain/newsMain.js?v=1.1"></script>
     <script src="/components/header/headerLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>

views/newsPages/newsMain/newsMain.js

@@ -210,4 +210,35 @@ document.addEventListener("DOMContentLoaded", function () {
   // Initialize the page when the DOM is loaded
   initializePage();
 });
-//// PAGINATION JS
+//// END OF PAGINATION JS
+
+// 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";
+  }
+});

views/productPages/productMain/productMain.html

@@ -377,7 +377,7 @@
     <!-- Footer Component -->
     <div id="footer"></div>
 
-    <script src="productPages/productMain/productMain.js?v=1.0"></script>
+    <script src="productPages/productMain/productMain.js?v=1.1"></script>
     <script src="/components/header/headerLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>

views/productPages/productMain/productMain.js

@@ -55,3 +55,34 @@ document.addEventListener("DOMContentLoaded", function () {
     document.getElementById("products").classList.add("active");
   }
 });
+
+// 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";
+  }
+});

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";
+  }
+});