https://www.slagelsebib.dk/themes/custom/novel/assets/dpl-design-system/js/header-sidebar-nav-js.js?tm333x

1window.addEventListener("load", () => {
2  const sidebarNavToggle = document.getElementById(
3    "header-sidebar-nav__toggle",
4  );
5  const backgroundWrapper = document.querySelector(
6    ".header-sidebar-nav__background-wrapper",
7  );
8  const menu = document.querySelector(".header-sidebar-nav");
9
10  const closeButton = document.getElementById(
11    "js-header-sidebar-nav__close-menu-button",
12  );
13
14  const lastMenuItem = document.querySelector(
15    ".header-sidebar-nav  .header__menu-navigation li:last-child a",
16  );
17  const menuWrapper = document.querySelector(
18    ".header-sidebar-nav__menu-wrapper",
19  );
20
21  function toggleSidebarNav() {
22    const isOpen = menu.getAttribute("data-open") === "open";
23
24    if (menu) {
25      menu.setAttribute("data-open", isOpen ? "closed" : "open");
26    }
27
28    if (sidebarNavToggle) {
29      sidebarNavToggle.setAttribute("aria-expanded", isOpen ? "false" : "true");
30    }
31
32    if (!isOpen && closeButton) {
33      // When menu opens - move focus to the close button
34      closeButton.focus();
35    } else if (isOpen && sidebarNavToggle) {
36      // When menu closes - move focus to the menu toggle button
37      sidebarNavToggle.focus();
38    }
39  }
40
41  if (sidebarNavToggle) {
42    sidebarNavToggle.addEventListener("click", toggleSidebarNav);
43
44    // Allow menu to be opened with Enter or Space key
45    sidebarNavToggle.addEventListener("keydown", (event) => {
46      if (event.key === "Enter" || event.key === " ") {
47        toggleSidebarNav();
48        event.preventDefault();
49      }
50    });
51  }
52
53  if (lastMenuItem) {
54    // When tabbing out of the last menu item, move focus to the close button
55    lastMenuItem.addEventListener("keydown", (event) => {
56      if (event.key === "Tab" && !event.shiftKey) {
57        event.preventDefault(); // Prevent tabbing to an element outside the menu
58        closeButton.focus();
59      }
60    });
61  }
62  if (closeButton) {
63    closeButton.addEventListener("click", toggleSidebarNav);
64    // When tabbing backwards out of the close button, move focus to the last menu item
65    closeButton.addEventListener("keydown", (event) => {
66      if (event.key === "Tab" && event.shiftKey) {
67        event.preventDefault(); // Prevent tabbing to an element outside the menu
68        lastMenuItem.focus();
69      }
70      // Allow close button to be activated with Enter or Space key
71      if (event.key === "Enter" || event.key === " ") {
72        toggleSidebarNav();
73        event.preventDefault();
74      }
75    });
76  }
77
78  // Close the menu if open when the escape key is pressed
79  document.addEventListener("keydown", (event) => {
80    if (event.key === "Escape" && menu.getAttribute("data-open") === "open") {
81      toggleSidebarNav();
82    }
83  });
84
85  // Close the menu if a link is clicked
86  if (menuWrapper) {
87    menuWrapper.addEventListener("click", (event) => {
88      // Check if the click is inside a link within a navigation item
89      if (event.target.closest(".header__menu-navigation-item a")) {
90        toggleSidebarNav();
91      }
92    });
93  }
94
95  if (backgroundWrapper) {
96    backgroundWrapper.addEventListener("click", (event) => {
97      // Close the menu if the background wrapper is clicked
98      if (event.target === backgroundWrapper) {
99        toggleSidebarNav();
100      }
101    });
102  }
103});