https://info.associationcppt.fr/menu/menu.js

1function createNavbar() {
2    /* Create the navbar node and fill it with the logo and elements */
3    const navbarWrapper = document.createElement("details");
4    navbarWrapper.id = "navbar-wrapper";
5    navbarWrapper.open = true;
6    /* Hamburger menu */
7    const hamburgerSummary = document.createElement("summary");
8    hamburgerSummary.id = "hamburger";
9    const hamburgerIcon = document.createElement("div");
10    hamburgerIcon.id = "hamburger-icon";
11    const hamburgerIconLines = document.createElement("span");
12    hamburgerIconLines.id = "hamburger-icon-lines";
13    hamburgerIcon.appendChild(hamburgerIconLines); 
14    hamburgerSummary.appendChild(hamburgerIcon);
15    navbarWrapper.appendChild(hamburgerSummary);
16    /* Navbar */
17    const navbar = document.createElement("nav");
18    navbar.id = "navbar";
19    navbarWrapper.appendChild(navbar);
20    /* Logo */
21    const logo = document.createElement("div");
22    logo.id = "logo-wrapper";
23    const logoLink = document.createElement("a");
24    logoLink.id = "logo-link";
25    logoLink.href = NAVBAR.logo.href;
26    const logoImg = document.createElement("img");
27    logoImg.id = "logo-img";
28    logoImg.src = NAVBAR.logo.src;
29    logoImg.alt = NAVBAR.logo.alt;
30    logoLink.appendChild(logoImg);
31    logo.appendChild(logoLink);
32    navbar.appendChild(logo);
33    /* Elements */
34    const elements = document.createElement("div");
35    elements.id = "menu-wrapper";
36    const elementsList = document.createElement("ul");
37    elementsList.id = "menu-list";
38    NAVBAR.elements.forEach(element => {
39        const elementItem = document.createElement("li");
40        if (!element.subElements) {
41            const elementLink = document.createElement("a");
42            elementLink.href = element.href;
43            elementLink.textContent = element.label;
44            elementItem.appendChild(elementLink);
45        } else {
46            const details = document.createElement("details");
47            const summary = document.createElement("summary");
48            summary.textContent = element.label;
49            const subElementsList = document.createElement("ul");
50            element.subElements.forEach(subElement => {
51                const subElementItem = document.createElement("li");
52                const subElementLink = document.createElement("a");
53                subElementLink.href = subElement.href;
54                subElementLink.textContent = subElement.label;
55                subElementItem.appendChild(subElementLink);
56                subElementsList.appendChild(subElementItem);
57            });
58            details.appendChild(summary);
59            details.appendChild(subElementsList);
60            elementItem.appendChild(details);
61        }
62        elementsList.appendChild(elementItem);
63    });
64    elements.appendChild(elementsList);
65    navbar.appendChild(elements);
66    return navbarWrapper;
67}
68
69/* Close menu when width is lower than 950px */
70function toggleMenuResponsively() {
71    const navbarWrapper = document.getElementById("navbar-wrapper");
72    if (window.innerWidth <= 950) {
73        console.debug("toggleMenuResponsively: close");
74        navbarWrapper.removeAttribute("open");
75    } else {
76        console.debug("toggleMenuResponsively: open");
77        navbarWrapper.setAttribute("open", "true");
78    }
79}
80window.addEventListener("resize", toggleMenuResponsively);
81
82function closeAllSubMenus() {
83    // if (window.innerWidth > 950) {
84    //     return;
85    // }
86    console.debug("closeAllSubMenus: close");
87    const navbarWrapper = document.getElementById("navbar-wrapper");
88
89    const openSubMenus = navbarWrapper.querySelectorAll("details[open]");
90    openSubMenus.forEach((menu) => {
91        menu.removeAttribute("open");
92    });
93}
94
95function toggleDetailElement(detailElement) {
96    if (detailElement.hasAttribute("open")) {
97        detailElement.removeAttribute("open");
98        console.debug("toggleDetailElement: close");
99    } else {
100        console.debug("toggleDetailElement: open");
101        detailElement.setAttribute("open", "true");
102    }
103}
104
105/* Append the navbar to the body when the page is loaded */
106document.addEventListener("DOMContentLoaded", () => {
107    if (!NAVBAR) {
108        console.error("No NAVBAR data found");
109        return;
110    }
111    const navbar = createNavbar();
112    const header = document.getElementById("header");
113    header.appendChild(navbar);
114
115    const navbarWrapper = document.getElementById("navbar-wrapper");
116
117    const hamburger = document.getElementById("hamburger");
118    hamburger.addEventListener("click", (event) => {
119        event.stopPropagation();
120        toggleDetailElement();
121    });
122
123    const menuLinks = navbarWrapper.querySelectorAll("a");
124    menuLinks.forEach(link => {
125        link.addEventListener("click", () => {
126            closeAllSubMenus();
127            if (window.innerWidth <= 950) {
128                console.debug("menuLinksClick: close");
129                navbarWrapper.removeAttribute("open");
130            }
131        });
132    });
133
134    document.addEventListener("click", (event) => {
135        if (!navbarWrapper.contains(event.target)) {
136            closeAllSubMenus();
137        }
138    });
139
140    toggleMenuResponsively();
141});