sidebar: add event delegation

This commit is contained in:
2026-06-03 04:37:05 +07:00
parent 42429b1509
commit 65f306523a
12 changed files with 192 additions and 7 deletions
+1 -1
View File
@@ -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>
+30
View File
@@ -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";
}
});
+1 -1
View File
@@ -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>
+31
View File
@@ -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";
}
});
+1 -1
View File
@@ -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>
+31
View File
@@ -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";
}
});
+1 -1
View File
@@ -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>
+32 -1
View File
@@ -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";
}
});
@@ -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>
@@ -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";
}
});
+1 -1
View File
@@ -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>
+31
View File
@@ -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";
}
});