class MainMenu extends HTMLElement { constructor() { super(); this.generateMenu(); } async generateMenu(){ let menu = await (await fetch("/API/mainMenu.json")).json(); let menuContainer = document.createElement("div"); menuContainer.className = "mainMenuContainer"; menu.forEach((element) => { if(element["type"] === "link"){ let a = document.createElement("a"); a.href = element["url"]; a.innerText = element["name"]; menuContainer.appendChild(a); if(window.location['pathname'] === element["url"]){ document.title = element["name"] + " - Jonas Leder"; } } else if(element["type"] === "dropdown"){ let dropdown = document.createElement("div"); dropdown.className = "dropdown"; let a = document.createElement("a"); a.href = element["url"]; a.innerText = element["name"]; dropdown.appendChild(a) let dropdownContent = document.createElement("div"); dropdownContent.className = "dropdown-content" element["childElements"].forEach((childElement) => { let a = document.createElement("a"); a.href = childElement["url"]; a.innerText = childElement["name"]; dropdownContent.appendChild(a); let br = document.createElement("br"); dropdownContent.appendChild(br); if(window.location['pathname'] === childElement["url"]){ document.title = childElement["name"] + " - Jonas Leder"; } }); dropdown.appendChild(dropdownContent); menuContainer.appendChild(dropdown); } }); this.appendChild(menuContainer); } } customElements.define("jl-main_menu", MainMenu);