class Header extends HTMLElement {
    constructor() {
        super();
        let pageTitle = this.getAttribute("data-title");

        const header = document.createElement("header");
        this.appendChild(header);

        const headerWrapper = document.createElement("div");
        headerWrapper.classList.add("header-wrapper");
        header.appendChild(headerWrapper);

        const headerHomepage = document.createElement("div");
        headerHomepage.classList.add("header-homepage");
        headerWrapper.appendChild(headerHomepage);

        const alignHolder = document.createElement("div");
        alignHolder.classList.add("align-holder");
        headerHomepage.appendChild(alignHolder);

        const h1 = document.createElement("h1");
        h1.innerText = pageTitle;
        h1.onclick = () => {
            document.getElementById("content").scrollIntoView();
        }
        alignHolder.appendChild(h1);

        const headerSeparator = document.createElement("div");
        headerSeparator.classList.add("header-separator");
        headerSeparator.classList.add("header-separator-bottom");
        headerWrapper.appendChild(headerSeparator);

        const svg = document.createElement("jl-svg");
        svg.setAttribute("data-name", "banner");
        headerSeparator.appendChild(svg);
        
        const mainMenu = document.createElement("jl-main_menu");
        mainMenu.setAttribute("data-title", pageTitle);
        mainMenu.id = "mainmenu";
        header.appendChild(mainMenu);
    }
}

customElements.define("jl-header", Header);