headerjs and header html

// eslint-disable-next-line import/extensions
import debounce from './debounce.js';

function header() {
  const menuButton = document.querySelector('.menu-button');
  const mainMenu = document.querySelector('.header__menus');
  const haveL2 = mainMenu.querySelectorAll('.has-l2');
  const donateButton = document.querySelector('.donate-button');
  const donateMenu = document.querySelector('.donate-menu');

  const openMenu = (menu, button) => {
    const btn = button;
    menu.classList.add('is-open');
    btn.dataset.expanded = 'true';
    document.body.classList.add('no-scroll');
  };

  const closeMenu = (menu, button) => {
    const btn = button;
    menu.classList.remove('is-open');
    btn.dataset.expanded = 'false';
    document.body.classList.remove('no-scroll');
  };

  menuButton.addEventListener('click', () => {
    if (menuButton.dataset.expanded === 'true') {
      closeMenu(mainMenu, menuButton);
    } else {
      openMenu(mainMenu, menuButton);
      closeMenu(donateMenu, donateButton);
    }
  });

  donateButton.addEventListener('click', () => {
    if (window.innerWidth < 1160) {
      if (donateButton.dataset.expanded === 'true') {
        closeMenu(donateMenu, donateButton);
      } else {
        openMenu(donateMenu, donateButton);
        closeMenu(mainMenu, menuButton);
      }
    }
  });

  donateButton.addEventListener('mouseenter', () => {
    if (window.innerWidth > 1160) {
      openMenu(donateMenu, donateButton);
    }
  });

  donateMenu.addEventListener('mouseleave', closeMenu(donateMenu, donateButton));

  haveL2.forEach((l2Li) => {
    const l2OpenButton = l2Li.querySelector('.open-l2');
    const l2CloseButton = l2Li.querySelector('.close-l2');
    const l2ToggleButton = l2Li.querySelector('.toggle-l2');
    const l2Menu = l2Li.querySelector('.main-menu__l2');
    console.log(l2Menu);

    l2OpenButton.addEventListener('click', () => {
      l2Menu.classList.remove('is-invisible');
    });

    l2CloseButton.addEventListener('click', () => {
      l2Menu.classList.add('is-invisible');
    });

    l2ToggleButton.addEventListener('mouseenter',() => {
      l2Menu.classList.remove('is-invisible');
    });
    l2Li.addEventListener('mouseleave',() => {
      l2Menu.classList.add('is-invisible');
    });
  });

  document.addEventListener('click', (event) => {
    if (!mainMenu.contains(event.target)
    && !menuButton.contains(event.target)
    && mainMenu.classList.contains('is-open')) {
      closeMenu(mainMenu, menuButton);
    }
    if (!donateMenu.contains(event.target)
    && !donateButton.contains(event.target)
    && donateMenu.classList.contains('is-open')) {
      closeMenu(donateMenu, donateButton);
    }
  });

  window.addEventListener('resize', debounce(() => {
    closeMenu(mainMenu, menuButton);
    closeMenu(donateMenu, donateButton);
  }));

  const headerEl = document.querySelector('.header')
  const sentinalEl = document.querySelector('.sentinal')

  const handler = (entries) => {
    console.log(entries)
    if (!entries[0].isIntersecting) {
      headerEl.setAttribute('stuck', true);
    } else {
      headerEl.setAttribute('stuck', false);
    }
  }
  const observer = new window.IntersectionObserver(handler)
  observer.observe(sentinalEl);
}

header();



header html

<div class="container"><ul class="main-menu"><li class="has-l2"><div><a href="/resevanje/"><span>Reševanje</span></a>
<button class="open-l2" aria-label="Prikaži podstrani"><svg class="icon arrow-right"><use xlink:href="/icons/symbol-defs.svg#icon-arrow-right"></use></svg></button>
<button class="toggle-l2" aria-label="Razširi menu"><svg class="icon caret-down"><use xlink:href="/icons/symbol-defs.svg#icon-caret-down"></use></svg></button></div><div class="main-menu__l2 is-invisible"><div class="container"><button class="close-l2" aria-label="Nazaj"><svg class="icon arrow-left"><use xlink:href="/icons/symbol-defs.svg#icon-arrow-left"></use></svg></button><ul><li><a href="/resevanje/">Reševanje</a></li><li><a href="/resevanje/nasveti-grzs">Nasveti GRZS</a></li><li><a href="/resevanje/statistika-nesrec">Statistika nesreč</a></li><li><a href="/resevanje/klic-v-sili">Klic v sili</a></li><li><a href="/resevanje/postani-gorski-resevalec">Postani gorski reševalec</a></li></ul></div></div></li><li class="has-l2"><div><a href="/aktualno/"><span>Aktualno</span></a>
<button class="open-l2" aria-label="Prikaži podstrani"><svg class="icon arrow-right"><use xlink:href="/icons/symbol-defs.svg#icon-arrow-right"></use></svg></button>
<button class="toggle-l2" aria-label="Razširi menu"><svg class="icon caret-down"><use xlink:href="/icons/symbol-defs.svg#icon-caret-down"></use></svg></button></div><div class="main-menu__l2 is-invisible"><div class="container"><button class="close-l2" aria-label="Nazaj"><svg class="icon arrow-left"><use xlink:href="/icons/symbol-defs.svg#icon-arrow-left"></use></svg></button><ul><li><a href="/aktualno/">Aktualno</a></li><li><a href="/aktualno/novice/">Novice</a></li><li><a href="/aktualno/dnevni-bilten-urszr/">Dnevni bilten URSZR</a></li></ul></div></div></li><li class="has-l2"><div><a href="/o-grzs/"><span>O GRZS</span></a>
<button class="open-l2" aria-label="Prikaži podstrani"><svg class="icon arrow-right"><use xlink:href="/icons/symbol-defs.svg#icon-arrow-right"></use></svg></button>
<button class="toggle-l2" aria-label="Razširi menu"><svg class="icon caret-down"><use xlink:href="/icons/symbol-defs.svg#icon-caret-down"></use></svg></button></div><div class="main-menu__l2 is-invisible"><div class="container"><button class="close-l2" aria-label="Nazaj"><svg class="icon arrow-left"><use xlink:href="/icons/symbol-defs.svg#icon-arrow-left"></use></svg></button><ul><li><a href="/o-grzs/">O GRZS</a></li><li><a href="/o-grzs/predstavitev/">Predstavitev</a></li><li><a href="/o-grzs/kontakt/">Kontakt</a></li><li><a href="/o-grzs/drustva-in-postaje/">Društva in postaje</a></li><li><a href="/o-grzs/program-aktivnosti/">Program aktivnosti</a></li><li><a href="/o-grzs/sklad-okreselj/">Sklad Okrešelj</a></li><li><a href="/o-grzs/ikar-mednarodno-resevanje/">IKAR / Mednarodno reševanje</a></li></ul></div></div></li><li><div><a href="/medijsko-sredisce/"><span>Medijsko središče</span></a></div></li></ul><ul class="upper-menu"><li><a href="#ZgotmplZ"><svg class="icon call"><use xlink:href="/icons/symbol-defs.svg#icon-call"></use></svg><span>112 - KLIC V SILI</span></a></li><li><a href="/aktualno/novice/"><svg class="icon picture"><use xlink:href="/icons/symbol-defs.svg#icon-picture"></use></svg><span>Galerija</span></a></li><li><a href="https://e-ucbenik.grzs.si/index.php?title=Glavna_stran/"><svg class="icon icon-e-ucbenik"><use xlink:href="/icons/symbol-defs.svg#icon-icon-e-ucbenik"></use></svg><span>E-učbenik</span></a></li><li><a href="/prijava-za-uporabnike/"><svg class="icon user"><use xlink:href="/icons/symbol-defs.svg#icon-user"></use></svg><span>Prijava za uporabnike</span></a></li></ul></div>