https://medpov.com/frontend/assets/js/menu/menu.js

1"use strict";
2const menu = document.querySelector(".menu-block");
3const menuMain = menu.querySelector(".site-menu-main");
4const submenuAll = menu.querySelectorAll(".sub-menu");
5const goBack = menu.querySelector(".go-back");
6const menuTrigger = document.querySelector(".mobile-menu-trigger");
7const closeMenu = menu.querySelector(".mobile-menu-close");
8let subMenu;
9let subMenuArray = [];
10let subMenuTextArray = [];
11
12function last(array) {
13    return array[array.length - 1];
14}
15
16function last2(array) {
17    return array[array.length - 2];
18}
19
20
21menuMain.addEventListener("click", (e) => {
22
23    if (!menu.classList.contains("active")) {
24        return;
25    }
26    if (e.target.closest(".nav-item-has-children")) {
27        const hasChildren = e.target.closest(".nav-item-has-children");
28
29        showSubMenu(hasChildren);
30    }
31});
32goBack.addEventListener("click", () => {
33    const lastItem = last(subMenuArray);
34    const lastItemText = last2(subMenuTextArray);
35    subMenuArray.pop();
36    subMenuTextArray.pop();
37    if (subMenuArray.length >= 0) {
38        document.getElementById(lastItem).style.animation = "slideRight 0.5s ease forwards";
39        menu.querySelector(".current-menu-title").innerHTML = lastItemText;
40        setTimeout(() => {
41            document.getElementById(lastItem).classList.remove("active");
42        }, 300);
43    }
44    if (subMenuArray.length == 0) {
45        menu.querySelector(".mobile-menu-head").classList.remove("active");
46    }
47})
48menuTrigger.addEventListener("click", () => {
49    toggleMenu();
50})
51closeMenu.addEventListener("click", () => {
52    toggleMenu();
53})
54document.querySelector(".menu-overlay").addEventListener("click", () => {
55    toggleMenu();
56})
57
58function toggleMenu() {
59    menu.classList.toggle("active");
60    document.querySelector(".menu-overlay").classList.toggle("active");
61}
62
63function showSubMenu(hasChildren) {
64    for (let i = 0; submenuAll.length < i; i++) {
65        submenuAll[i].classList.remove("active");
66    }
67    subMenu = hasChildren.querySelector(".sub-menu");
68    subMenuArray.push(subMenu.id);
69    subMenu.classList.add("active");
70    subMenu.style.animation = "slideLeft 0.5s ease forwards";
71    const menuTitle = hasChildren.querySelector(".drop-trigger").textContent;
72    subMenuTextArray.push(menuTitle);
73
74    menu.querySelector(".current-menu-title").innerHTML = menuTitle;
75    menu.querySelector(".mobile-menu-head").classList.add("active");
76}
77window.onresize = function() {
78    if (this.innerWidth > 991) {
79        if (menu.classList.contains("active")) {
80            toggleMenu();
81        }
82
83    }
84}