https://www.hotelmicheletodeon.com/html/views/menu/burger/ui.js

1const toggleClass = function (element, ...classname) {
2  classname.forEach((classname) => {
3    element.classList.toggle(classname);
4  });
5};
6
7var initMenu = function () {
8  let menu, menuButton, mainNav, line1, line2, line3;
9  let fixed = false;
10  menu = document.getElementById("main-menu");
11  menuButton = document.getElementById("menu-toggle");
12  mainNav = document.getElementById("main-nav");
13
14  line1 = menuButton.querySelector(".line1");
15  line2 = menuButton.querySelector(".line2");
16  line3 = menuButton.querySelector(".line3");
17
18  var heightNavigation = parseInt(
19    getComputedStyle(document.documentElement).getPropertyValue(
20      "--height-navigation",
21    ),
22  );
23
24  setStickyNav();
25
26  window.addEventListener("scroll", setStickyNav, {
27    capture: true,
28    passive: true,
29  });
30
31  if (document.body.classList.contains("onepage")) {
32    menu.querySelectorAll("a").forEach(function (link) {
33      link.addEventListener("click", function (e) {
34        e.preventDefault();
35        var target = document.getElementById(
36          link.dataset.menu.replace("#", ""),
37        );
38        if (target) {
39          closeMenu();
40          var top = target.offsetTop - heightNavigation;
41          window.scrollTo({
42            top: top,
43            behavior: "smooth",
44          });
45        }
46      });
47    });
48  }
49
50  let events = {
51    click: window.ontouchstart === null ? "touchstart" : "click",
52  };
53
54  const elementsEvent = [menuButton];
55  const body = document.getElementsByTagName("body")[0];
56
57  if (window.globals.header != "") {
58    body.classList.add(window.globals.header);
59  }
60
61  document.addEventListener(
62    "click",
63    function (event) {
64      if (
65        (event.target.matches(".menu-toggle") ||
66          !event.target.closest(".main-nav")) &&
67        menu.classList.contains("open")
68      ) {
69        closeMenu();
70      }
71    },
72    false,
73  );
74
75  const closeMenu = function () {
76    //load images in menu with attr menu-src
77    let images = menu.querySelectorAll("[menu-src]");
78    images.forEach(function (image) {
79      image.src = image.getAttribute("menu-src");
80      image.removeAttribute("menu-src");
81    });
82
83    Array.from([line1, line2, line3], (item) =>
84      item.classList.toggle("fill-neutral-800"),
85    );
86    Array.from([line1, line3], (item) => toggleClass(item, "origin-top"));
87    body.classList.toggle("overflow-hidden");
88    menuButton.querySelector("span").classList.toggle("hidden");
89    toggleClass(menu, "opacity-100", "translate-x-0", "open");
90    toggleClass(
91      line1,
92      "transform",
93      "-rotate-45",
94      "translate-x-[-2px]",
95      "translate-y-[15px]",
96    );
97    toggleClass(
98      line3,
99      "transform",
100      "rotate-45",
101      "translate-x-[15px]",
102      "translate-y-[-6px]",
103    );
104
105    line2.classList.toggle("w-0");
106  };
107
108  elementsEvent.forEach(function (element) {
109    element.addEventListener(
110      events.click,
111      function (e) {
112        e.stopImmediatePropagation();
113        closeMenu();
114      },
115      { passive: true, capture: true },
116    );
117  });
118
119  function setStickyNav() {
120    let scrollBarPosition = Math.abs(
121      window.pageYOffset | document.body.scrollTop,
122    );
123    let pageHeight = document.body.classList.contains("load-header")
124      ? window.innerHeight
125      : 0;
126    fixed = typeof fixed === "undefined" ? false : fixed;
127

128    const editClass = function () {
129      toggleClass(mainNav, "bg-neutral-100", "fixed-menu", "shadow-md");
130      toggleClass(
131        mainNav.querySelector(".btn-effect"),
132        "text-primary-900",
133        "border-primary-900",
134      );
135      menuButton.querySelector("svg").classList.toggle("fill-neutral-100");
136      toggleClass(menuButton.querySelector("svg"), "fill-primary-900");
137      toggleClass(
138        mainNav.querySelector(".menu-nav-logo"),
139        "opacity-100",
140        "pointer-events-auto",
141      );
142      const btnEffect = mainNav.querySelector(".btn-effect");
143
144      if (btnEffect) {
145        toggleClass(btnEffect, "hover:text-neutral-100");
146      }
147    };
148
149    if (scrollBarPosition >= pageHeight && fixed === false) {
150      fixed = true;
151      // get menu-nav-logo element and replace the menu-src by src
152      menuButton.querySelector("span").classList.add("text-primary-900");
153      menuButton.querySelector("span").classList.remove("text-neutral-50");
154
155      let logo = mainNav.querySelector(".menu-nav-logo img");
156      if (logo.getAttribute("menu-src")) {
157        logo.src = logo.getAttribute("menu-src");
158        logo.removeAttribute("menu-src");
159      }
160      editClass();
161    }
162
163    if (scrollBarPosition < pageHeight && fixed === true) {
164      fixed = false;
165      menuButton.querySelector("span").classList.remove("text-primary-900");
166      menuButton.querySelector("span").classList.add("text-neutral-50");
167      editClass();
168    }
169  }
170};
171
172// Hide/show dynamic calendar
173const bookingButton = document.querySelectorAll(".open-booking");
174const closeBookingButton = document.getElementById("close-book-calendar");
175const bookingCalendar = document.getElementById("booking-calendar");
176if (bookingCalendar) {
177  const setBookingCalendarState = function (isOpen) {
178    bookingCalendar.classList.toggle("opacity-0", !isOpen);
179    bookingCalendar.classList.toggle("opacity-100", isOpen);
180    bookingCalendar.classList.toggle("translate-x-full", !isOpen);
181    bookingCalendar.classList.toggle("translate-x-0", isOpen);
182    bookingCalendar.classList.toggle("pointer-events-none", !isOpen);
183    bookingCalendar.classList.toggle("pointer-events-auto", isOpen);
184  };
185
186  setBookingCalendarState(false);
187
188  bookingButton.forEach((btn) => {
189    btn.addEventListener("click", function (e) {
190      e.preventDefault();
191      if (
192        !document.querySelector(
193          "script[src='https://websdk.d-edge.com/widgets/app.js']",
194        )
195      ) {
196        lazy.loadScript("https://websdk.d-edge.com/widgets/app.css", 0);
197        lazy.loadScript("https://websdk.d-edge.com/widgets/app.js", 0);
198      }
199
200      setBookingCalendarState(true);
201    });
202  });
203
204  if (closeBookingButton) {
205    closeBookingButton.addEventListener("click", function (e) {
206      e.preventDefault();
207      setBookingCalendarState(false);
208    });
209  }
210}