hmn/src/templates/src/include/header.html

<header class="mb3 bb bw1 b--theme-dark">
    <div class="user-options flex justify-center justify-end-ns">
        {{ if .User }}
            {{ if .User.IsStaff }}
                <a class="admin-panel pa2" href="{{ .Header.AdminUrl }}"><span class="icon-settings"> Admin</span></a>
            {{ end }}
            <div>
                <a class="dib pv2 pl2" href="{{ .Header.UserProfileUrl }}">{{ .User.Username }}</a>
                <a class="dib pv2 pr2" href="{{ .Header.UserSettingsUrl }}">(settings)</a>
            </div>
            <a class="logout pa2" href="{{ .Header.LogoutActionUrl }}"><span class="icon-logout"></span> Log Out</a>
        {{ else }}
            <a class="register pa2" id="register-link" href="{{ .Header.RegisterUrl }}">Register</a>
            <a class="login pa2" id="login-link" href="{{ .LoginPageUrl }}">Log in</a>
            <div id="login-popup">
                <form action="{{ .Header.LoginActionUrl }}" method="post" class="ma0">
                    <input type="text" name="username" class="w-100" value="" placeholder="Username" />
                    <input type="password" name="password" class="w-100 mt1" value="" placeholder="Password" />
                    <a class="db" style="padding: 0.5rem 0;" href="{{ .Header.ForgotPasswordUrl }}">Forgot your password?</a>
                    <input type="hidden" name="redirect" value="{{ $.CurrentUrl }}">
                    <div class="pt2">
                        <input type="submit" value="Log In" />
                    </div>
                </form>
            </div>
        {{ end }}
    </div>
	<div class="menu-bar flex flex-column flex-row-l justify-between {{ if .IsProjectPage }}project{{ end }}">
        <div class="flex flex-column flex-row-ns">
            <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo bg-theme-dark">
                Handmade
            </a>
            <div class="items flex items-center justify-center justify-start-ns">
                {{ if .IsProjectPage }}
                    <a class="project-logo" href="{{ .Header.ProjectHomepageUrl }}">
                        <h1>{{ .Project.Name }}</h1>
                    </a>
                {{ end }}
				{{ if not .IsProjectPage }}
					<a href="{{ .Header.ProjectIndexUrl }}" class="projects">Projects</a>
				{{ end }}
                {{ if .Project.HasBlog }}
					<a href="{{ .Header.BlogUrl }}" class="blog">{{ if .IsProjectPage }}Blog{{ else }}News{{ end }}</a>
                {{ end }}
                {{ if .Project.HasForum }}
                    <a href="{{ .Header.ForumsUrl }}" class="forums">Forums</a>
                {{ end }}
                {{ if .Project.HasLibrary }}
                    <a href="{{ .Header.LibraryUrl }}" class="library">Library</a>
                {{ end }}
                {{ if .Project.IsHMN }}
                    <a href="{{ .Header.ManifestoUrl }}" class="misson">Mission</a>
                {{ end }}
                {{ if .Header.EpisodeGuideUrl }}
                    <a href="{{ .Header.EpisodeGuideUrl }}" class="annotations">Episode Guide</a>
                {{ end }}
                {{ if .Header.EditUrl }}
                    <a class="edit" href="{{ .Header.EditUrl }}" title="Edit {{ .Project.Name }}"><span class="icon">0</span>&nbsp;Settings</a>
                {{ end }}
            </div>
        </div>
        <form onsubmit="this.querySelector('input[name=q]').value = this.querySelector('#searchstring').value + ' site:handmade.network';" class="dn ma0 flex-l flex-column justify-center items-end" method="GET" action="{{ .Header.SearchActionUrl }}" target="_blank">
			<input type="hidden" name="q" />
            <input class="site-search bn lite pa2 fira" type="text" id="searchstring" value="" placeholder="Search with DuckDuckGo" size="18" />
            <input id="search_button_homepage" type="submit" value="Go"/>
        </form>
    </div>
</header>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        var loginPopup = document.getElementById("login-popup");
        var loginLink = document.getElementById("login-link");

        if (loginPopup !== null) {
            loginLink.removeAttribute("href");

            loginLink.onclick = function() {
                loginPopup.classList.toggle("open");
            }
        }

        for (const time of document.querySelectorAll('time')) {
            const d = new Date(Date.parse(time.dateTime));
            time.title = d.toLocaleString();
        }
    });
</script>