diff --git a/src/public/scripts/footer.js b/src/public/scripts/footer.js index 7bdc130..0aff9de 100644 --- a/src/public/scripts/footer.js +++ b/src/public/scripts/footer.js @@ -24,4 +24,40 @@ factSubmitButton.addEventListener("click", () => { console.error("Error fetching fact:", error); Swal.fire('Error fetching fact', 'Please try again later', 'error'); }); +}); + +document.addEventListener("DOMContentLoaded", () => { + const drawer = document.getElementById("drawer-navigation"); + const toggle = document.getElementById("drawer-toggle"); + + function openDrawer() { + drawer.classList.remove("translate-x-full"); + + // Add backdrop + const backdrop = document.createElement("div"); + backdrop.className = "fixed inset-0 bg-gray-900/50 z-30 drawer-backdrop"; + document.body.appendChild(backdrop); + + // Optional: prevent scroll + document.body.classList.add("overflow-hidden"); + + backdrop.addEventListener("click", closeDrawer); + } + + function closeDrawer() { + drawer.classList.add("translate-x-full"); + + const backdrop = document.querySelector(".drawer-backdrop"); + if (backdrop) backdrop.remove(); + + document.body.classList.remove("overflow-hidden"); + } + + toggle.addEventListener("click", openDrawer); + + // Also close on X button if needed + const closeBtn = drawer.querySelector("[data-drawer-hide]"); + if (closeBtn) { + closeBtn.addEventListener("click", closeDrawer); + } }); \ No newline at end of file diff --git a/src/views/partials/footer.ejs b/src/views/partials/footer.ejs index 3c6c988..fa865b8 100644 --- a/src/views/partials/footer.ejs +++ b/src/views/partials/footer.ejs @@ -13,7 +13,7 @@