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

<header id="site-header" class="mb3 bb bw1 b--theme-dark">
    <a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
    <div class="user-options flex justify-center justify-end-ns relative">
        {{ 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-ns justify-between w-100 {{ if .IsProjectPage }}project{{ end }}">
        <div class="flex flex-column flex-row-ns items-center w-100">
            {{ $itemsClass := "items self-stretch flex items-center justify-center justify-start-ns ml2-ns ml3-l" }}
            {{ if .Header.Project }}
                <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo small bg-theme-dark flex-shrink-0">
                    Hand
                    made
                </a>
                <a href="{{ .Project.Url }}" class="flex-shrink-0">
                    <h2 class="mb0 mt2 mt0-ns mh3 mr0-ns tc tl-ns">{{ .Project.Name }}</h2>
                </a>
                {{ with .Header.Project }}
                    <div class="{{ $itemsClass }} w-100">
                        {{ if .HasBlog }}
                            <div class="root-item flex-shrink-0">
                                <a href="{{ .BlogUrl }}">Blog</a>
                            </div>
                        {{ end }}
                        {{ if .HasForums }}
                            <div class="root-item flex-shrink-0">
                                <a href="{{ .ForumsUrl }}">Forums</a>
                            </div>
                        {{ end }}
                        {{ if .HasEpisodeGuide }}
                            <div class="root-item flex-shrink-0">
                                <a href="{{ .EpisodeGuideUrl }}">Episode Guide</a>
                            </div>
                        {{ end }}
						{{ if .CanEdit }}
							<div class="flex-grow-1 dn db-ns"></div>
							<div class="root-item flex-shrink-0">
								<a href="{{ .EditUrl }}">Edit Project</a>
							</div>
						{{ end }}
                    </div>
                {{ end }}
            {{ else }}
                <a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo big bg-theme-dark">
                    Handmade
                </a>
                <div class="{{ $itemsClass }}">
                    <div class="root-item">
                        <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
                    </div>
                    <div class="root-item">
                        <a aria-expanded="false" aria-controls="media-submenu" class="menu-dropdown-js" href="#">
                          Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
                        </a>
                        <div class="submenu b--theme-dark" id="media-submenu">
                            <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
                            <a href="{{ .Header.PodcastUrl }}">Podcast</a>
                            <a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
                            <a href="https://guide.handmade-seattle.com/s" target="_blank">Handmade Dev Show</a>
                        </div>
                    </div>
                    <div class="root-item">
                        <a href="{{ .Header.ForumsUrl }}">Forums</a>
                    </div>
                    <div class="root-item">
                        <a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
                          Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
                        </a>
                        <div class="submenu b--theme-dark" id="resource-submenu">
                            <a href="{{ .Header.EducationUrl }}">Education</a>
                        </div>
                    </div>
                </div>
            {{ end }}
        </div>
        <div class="dn flex-ns items-center f3">
            <a class="svgicon svgicon-nofix" href="https://twitter.com/handmade_net/" target="_blank">{{ svg "twitter" }}</a>
            <a class="svgicon svgicon-nofix ml2" href="https://discord.gg/hmn" target="_blank">{{ svg "discord" }}</a>
        </div>
    </div>
</header>
<div id="content-start"></div>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        const header = document.querySelector('#site-header');

        // set up dropdown stuff for mobile / touch
        {
            const rootItems = header.querySelectorAll('.root-item');

            function clearDropdowns() {
                for (const item of rootItems) {
                    item.classList.remove('clicked');
                }
            }

            function clickDropdown(el) {
                header.classList.add('clicked');

                if (el.classList.contains('clicked')) {
                    clearDropdowns();
                } else {
                    clearDropdowns();
                    el.classList.add('clicked');
                }
            }

            for (const item of rootItems) {
                if (item.querySelector('.submenu')) {
                    item.addEventListener('click', e => {
                        clickDropdown(item);
                        e.stopPropagation();
                    });
                }
            }
        }

        // dropdown accessiblity 
        { 
          const dropdowns = document.querySelectorAll('.menu-dropdown-js');
          
          for(let i = 0; i < dropdowns.length; i++) {
                let dropdown = dropdowns[i];
                dropdown.addEventListener('click', e => {
                e.preventDefault();
                for(let j = 0; j < dropdowns.length; j++){
                  let each = dropdowns[j];
                  if(each != dropdown){
                    each.setAttribute("aria-expanded", false);
                  }
                }
                // getAttribute returns a string so we have to do it this way
                var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false"; 
                dropdown.setAttribute("aria-expanded", toSetTo);
                console.log(dropdown);
            }); 
          }
        }

        // set up login form
        {
            const loginPopup = document.getElementById("login-popup");
            const loginLink = document.getElementById("login-link");

            if (loginPopup !== null) {

                loginLink.onclick = (e) => { 
                    e.preventDefault();
                    loginPopup.classList.toggle("open");
                }
            }

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