website/js/customElements/mainMenu.js

class MainMenu extends HTMLElement {
    constructor() {
        super();
        this.generateMenu();
    }

    async generateMenu(){
        let menu =  await (await fetch("/API/mainMenu.php")).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);
            } 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);
                });

                dropdown.appendChild(dropdownContent);
                menuContainer.appendChild(dropdown);
            }
        });

        this.appendChild(menuContainer);
    }
}

customElements.define("jl-main_menu", MainMenu);