77 lines
No EOL
2.5 KiB
JavaScript
77 lines
No EOL
2.5 KiB
JavaScript
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";
|
|
|
|
let burgerMenu = document.createElement("div");
|
|
burgerMenu.id = "burgerMenu";
|
|
|
|
burgerMenu.onclick = () => {
|
|
document.getElementById("burgerMenu").classList.toggle("change");
|
|
document.querySelector(".mainMenuContainer").classList.toggle("visible");
|
|
|
|
}
|
|
|
|
for(let i = 1; i <= 3; i++) {
|
|
let bar = document.createElement("div");
|
|
bar.className = "bar" + i;
|
|
burgerMenu.appendChild(bar);
|
|
}
|
|
this.appendChild(burgerMenu);
|
|
|
|
|
|
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); |