https://dhb.de/themes/custom/dhb/js/mobile-menu.js?tm4h10

1let origNavContainerOuterHtml;
2let isMobile = false;
3
4function handleResize() {
5  if (window.innerWidth < 1397) { // see breakpoints css
6    if (!isMobile) {
7      initMobileMenu();
8    }
9  } else {
10    if (isMobile) {
11      destroyMobileMenu();
12    }
13  }
14}
15
16function initMobileMenu() {
17  isMobile = true;
18  const navContainer = document.getElementById('navbarSupportedContent');
19  const initialNavUl = navContainer.querySelector('ul');
20  let backButton = navContainer.querySelector('.back-button');
21
22  if (!backButton) {
23    let mainNav = document.getElementById('block-dhb-main-navigation');
24
25    backButton = document.createElement('button');
26    backButton.className = 'back-button';
27    backButton.ariaLabel = 'Zurück';
28    backButton.innerHTML = '<img src="/themes/custom/dhb/img/right-arrow.png" alt="Zurück Bild" width="20" height="20"/>';
29    backButton.style.display = 'none';
30    mainNav.prepend(backButton);
31  }
32
33  const menuStack = [];
34
35  function setupMenuItems(menuUl) {
36    const navLi = menuUl.querySelectorAll('li');
37
38    navLi.forEach(item => {
39      const clickableElement = item.querySelector('a, span');
40
41      if (clickableElement) {
42        clickableElement.classList.add('nav-link');
43        item.classList.add('nav-item');
44
45        if (item.querySelector('ul')) {
46          item.classList.add('has-children');
47        }
48
49        clickableElement.addEventListener('click', (e) => {
50          e.stopPropagation();
51
52          const targetMenu = item.querySelector('ul');
53          if (targetMenu) {
54            e.preventDefault();
55            menuStack.push(menuUl.innerHTML);
56            targetMenu.classList.add('nav-level-current');
57            backButton.style.display = 'block';
58
59            targetMenu.querySelectorAll('li').forEach(li => {
60              const childClickable = li.querySelector('a, span');
61              if (childClickable) {
62                childClickable.classList.add('nav-link');
63              }
64              li.classList.add('nav-item');
65              const childUl = li.querySelector('ul');
66              if (childUl) {
67                childUl.classList.remove('dropdown-submenu');
68                childUl.classList.add('dropdown-menu', 'container');
69              }
70            });
71
72            navContainer.querySelector('ul').innerHTML = targetMenu.innerHTML;
73            setupMenuItems(navContainer.querySelector('ul'));
74          }
75        });
76      }
77    });
78  }
79
80  setupMenuItems(initialNavUl);
81
82  backButton.addEventListener('click', () => {
83    if (menuStack.length > 0) {
84      const previousMenuHtml = menuStack.pop();

85      const menuUl = navContainer.querySelector('ul');
86      const links = menuUl.getElementsByTagName('a');
87
88      menuUl.innerHTML = previousMenuHtml;
89
90      setupMenuItems(menuUl);
91
92      if (menuStack.length === 0) {
93        backButton.style.display = 'none';
94        for (let i = 0; i < links.length; i++) {
95          links[i].style.textTransform = 'uppercase';
96        }
97      }
98    }
99  });
100}
101
102function destroyMobileMenu() {
103  isMobile = false;
104  const navContainer = document.getElementById('navbarSupportedContent');
105  navContainer.outerHTML = origNavContainerOuterHtml;
106}
107
108window.addEventListener('DOMContentLoaded', () => {
109  origNavContainerOuterHtml = document.getElementById('navbarSupportedContent').outerHTML;
110  handleResize();
111});
112
113window.addEventListener('resize', handleResize);