maotube/public/header.js

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

    document.querySelector("h1").outerHTML = `
        <header>
            <a href="/">
                <h1 id="app-name">MaoTube</h1>
            </a>
            <nav>
                ${links}
            </nav>
            <form method="GET" target="_self" action="/search">
                <input type="text" id="search" name="query" placeholder="Search">
                <input type="submit" value="Search">
            </form>
        </header>
    `
}

displayHeader();