function displayHeader() {
    const links = [
        {
            href: "/",
            name: "Home",
        },
        {
            href: "/register/",
            name: "Register",
        },
        {
            href: "/login/",
            name: "Login",
        },
        {
            href: "/upload/",
            name: "Upload",
        },
    ].map(({name, href}) => {
        if (href === window.location.pathname) {
            return `<a href="${href}"><b>${name}</b></a>`
        } else {
            return `<a href="${href}">${name}</a>`
        }
    }).join(" - ");

    document.querySelector("h1").outerHTML = `
        <header>
            <h1>MaoTube</h1>
                <nav>
                    ${links}
                </nav>
        </header>
    `
}

displayHeader();
