https://vejlebib.dk/themes/custom/novel/assets/dpl-design-system/js/header-state.js?tlu2fd

1// Function for checking the size of the desktop links container.
2function desktopLinksContainerCheckSize() {
3  const container = document.querySelector(".header__menu-navigation");
4
5  // By default, assume we are using the burger menu.
6  document.documentElement.classList.add("has-burger-menu");
7  document.documentElement.classList.remove("has-desktop-menu");
8
9  // The reserved width is for the logo and service buttons.
10  const reservedWidth = 250 + 70 + 70 + 105;
11  // Calculate available space subtracting the reserved width from the total inner window width.
12  const availableSpace = window.innerWidth - reservedWidth;
13
14  // If the width of the menu container is greater than the available space,
15  // we keep the burger menu. Otherwise, we swap to the desktop menu format.
16  if (container.scrollWidth > availableSpace) {
17    document.documentElement.classList.add("has-burger-menu");
18    document.documentElement.classList.remove("has-desktop-menu");
19  } else {
20    document.documentElement.classList.remove("has-burger-menu");
21    document.documentElement.classList.add("has-desktop-menu");
22  }
23}
24
25// Function for initializing the header state based on window size and container width.
26function initHeaderState() {
27  // Finds the node with class 'header__menu-navigation' which is not initialized.
28  const desktopLinks = document.querySelector(
29    ".header__menu-navigation:not(.is-header-initialized)",
30  );
31
32  // If the desktop links exist, check their size
33  // and add a resize event listener to check the size whenever the window is resized.
34  if (desktopLinks) {
35    desktopLinksContainerCheckSize(desktopLinks);
36
37    window.addEventListener("resize", desktopLinksContainerCheckSize, true);
38    document.addEventListener("load", desktopLinksContainerCheckSize, true);
39
40    // Mark the links as initialized
41    desktopLinks.classList.add("is-header-initialized");
42  }
43}
44
45// Call the initHeaderState function to execute all the above operations.
46initHeaderState();