website/js/customElements/header.js
2022-03-25 10:43:24 +01:00

44 lines
1.5 KiB
JavaScript

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);