this repo has no description
hauleth.dev
1const container = document.querySelector(".container");
2const menu = document.querySelector(".menu");
3const mobileMenuTrigger = document.querySelector(".menu-trigger");
4const desktopMenu = document.querySelector(".menu__inner--desktop");
5const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");
6const menuMore = document.querySelector(".menu__sub-inner-more");
7const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
8const isMobile = () => window.matchMedia(mobileQuery).matches;
9const handleMenuClasses = () => {
10 mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());
11 menu && menu.classList.toggle("hidden", isMobile());
12 menuMore && menuMore.classList.toggle("hidden", !isMobile());
13};
14
15// Common
16
17menu && menu.addEventListener("click", e => e.stopPropagation());
18menuMore && menuMore.addEventListener("click", e => e.stopPropagation());
19
20handleMenuClasses();
21
22document.body.addEventListener("click", () => {
23 if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
24 menuMore.classList.add("hidden");
25 } else if (isMobile() && !menu.classList.contains("hidden")) {
26 menu.classList.add("hidden");
27 }
28});
29
30window.addEventListener("resize", handleMenuClasses);
31
32// Mobile menu
33
34mobileMenuTrigger &&
35 mobileMenuTrigger.addEventListener("click", e => {
36 e.stopPropagation();
37 menu && menu.classList.toggle("hidden");
38 });
39
40// Desktop menu
41
42desktopMenuTrigger &&
43 desktopMenuTrigger.addEventListener("click", e => {
44 e.stopPropagation();
45 menuMore && menuMore.classList.toggle("hidden");
46
47 if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {
48 menuMore.style.left = "auto";
49 menuMore.style.right = 0;
50 }
51 });