From 65f306523a245d1daa3df8133f0a2c0bb4380fc3 Mon Sep 17 00:00:00 2001 From: MinhQuan Date: Wed, 3 Jun 2026 04:37:05 +0700 Subject: [PATCH] sidebar: add event delegation --- views/aboutPages/aboutMain.html | 2 +- views/aboutPages/aboutMain.js | 30 +++++++++++++++++ views/contactPages/contactMain.html | 2 +- views/contactPages/contactMain.js | 31 +++++++++++++++++ views/homePages/homeMain.html | 2 +- views/homePages/homeMain.js | 31 +++++++++++++++++ views/newsPages/newsMain/newsMain.html | 2 +- views/newsPages/newsMain/newsMain.js | 33 ++++++++++++++++++- .../productPages/productMain/productMain.html | 2 +- views/productPages/productMain/productMain.js | 31 +++++++++++++++++ views/servicePages/serviceMain.html | 2 +- views/servicePages/serviceMain.js | 31 +++++++++++++++++ 12 files changed, 192 insertions(+), 7 deletions(-) diff --git a/views/aboutPages/aboutMain.html b/views/aboutPages/aboutMain.html index 48ee527..074d1e6 100644 --- a/views/aboutPages/aboutMain.html +++ b/views/aboutPages/aboutMain.html @@ -308,7 +308,7 @@ - + diff --git a/views/aboutPages/aboutMain.js b/views/aboutPages/aboutMain.js index 7b206da..d3d912f 100644 --- a/views/aboutPages/aboutMain.js +++ b/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"; + } +}); diff --git a/views/contactPages/contactMain.html b/views/contactPages/contactMain.html index ffce0cb..3b8322a 100644 --- a/views/contactPages/contactMain.html +++ b/views/contactPages/contactMain.html @@ -198,6 +198,6 @@ - + diff --git a/views/contactPages/contactMain.js b/views/contactPages/contactMain.js index 8613dfd..fccd276 100644 --- a/views/contactPages/contactMain.js +++ b/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"; + } +}); diff --git a/views/homePages/homeMain.html b/views/homePages/homeMain.html index c599a30..7b478e0 100644 --- a/views/homePages/homeMain.html +++ b/views/homePages/homeMain.html @@ -601,7 +601,7 @@ - + diff --git a/views/homePages/homeMain.js b/views/homePages/homeMain.js index 77ccb8b..d45d86a 100644 --- a/views/homePages/homeMain.js +++ b/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"; + } +}); diff --git a/views/newsPages/newsMain/newsMain.html b/views/newsPages/newsMain/newsMain.html index b12e41a..bc4e46e 100644 --- a/views/newsPages/newsMain/newsMain.html +++ b/views/newsPages/newsMain/newsMain.html @@ -277,7 +277,7 @@ - + diff --git a/views/newsPages/newsMain/newsMain.js b/views/newsPages/newsMain/newsMain.js index 1ec14af..7e87fa0 100644 --- a/views/newsPages/newsMain/newsMain.js +++ b/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"; + } +}); diff --git a/views/productPages/productMain/productMain.html b/views/productPages/productMain/productMain.html index 47cd73c..06b9aca 100644 --- a/views/productPages/productMain/productMain.html +++ b/views/productPages/productMain/productMain.html @@ -377,7 +377,7 @@ - + diff --git a/views/productPages/productMain/productMain.js b/views/productPages/productMain/productMain.js index b6d4bbf..c7a1f9e 100644 --- a/views/productPages/productMain/productMain.js +++ b/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"; + } +}); diff --git a/views/servicePages/serviceMain.html b/views/servicePages/serviceMain.html index 33f777b..81d99b4 100644 --- a/views/servicePages/serviceMain.html +++ b/views/servicePages/serviceMain.html @@ -319,7 +319,7 @@ - + diff --git a/views/servicePages/serviceMain.js b/views/servicePages/serviceMain.js index 35063d7..60fe050 100644 --- a/views/servicePages/serviceMain.js +++ b/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"; + } +});