From 941642aee876a97dbb79666d8fabaa2b1feb9ff5 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Sun, 20 Mar 2022 00:38:25 +0530 Subject: Theme changes --- themes/terminal/assets/js/menu.js | 51 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 themes/terminal/assets/js/menu.js (limited to 'themes/terminal/assets/js/menu.js') diff --git a/themes/terminal/assets/js/menu.js b/themes/terminal/assets/js/menu.js new file mode 100644 index 0000000..0a4899b --- /dev/null +++ b/themes/terminal/assets/js/menu.js @@ -0,0 +1,51 @@ +const container = document.querySelector(".container"); +const menu = document.querySelector(".menu"); +const mobileMenuTrigger = document.querySelector(".menu-trigger"); +const desktopMenu = document.querySelector(".menu__inner--desktop"); +const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger"); +const menuMore = document.querySelector(".menu__sub-inner-more"); +const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); +const isMobile = () => window.matchMedia(mobileQuery).matches; +const handleMenuClasses = () => { + mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile()); + menu && menu.classList.toggle("hidden", isMobile()); + menuMore && menuMore.classList.toggle("hidden", !isMobile()); +}; + +// Common + +menu && menu.addEventListener("click", e => e.stopPropagation()); +menuMore && menuMore.addEventListener("click", e => e.stopPropagation()); + +handleMenuClasses(); + +document.body.addEventListener("click", () => { + if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) { + menuMore.classList.add("hidden"); + } else if (isMobile() && !menu.classList.contains("hidden")) { + menu.classList.add("hidden"); + } +}); + +window.addEventListener("resize", handleMenuClasses); + +// Mobile menu + +mobileMenuTrigger && + mobileMenuTrigger.addEventListener("click", e => { + e.stopPropagation(); + menu && menu.classList.toggle("hidden"); + }); + +// Desktop menu + +desktopMenuTrigger && + desktopMenuTrigger.addEventListener("click", e => { + e.stopPropagation(); + menuMore && menuMore.classList.toggle("hidden"); + + if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) { + menuMore.style.left = "auto"; + menuMore.style.right = 0; + } + }); -- cgit v1.2.3