static/shared/header/header.tmpl

<!--
  Copyright 2021 The Go Authors. All rights reserved.
  Use of this source code is governed by a BSD-style
  license that can be found in the LICENSE file.
-->

{{define "header"}}
  <header class="go-Header{{if .AllowWideContent}} go-Header--full{{end}} js-siteHeader">
    <div class="go-Banner{{if .AllowWideContent}} go-Banner--full{{end}}">
      <div class="go-Banner-inner">
        <div class="go-Banner-message">Black Lives Matter</div>
        <a class="go-Banner-action"
          href="https://support.eji.org/give/153413/#!/donation/checkout"
          target="_blank"
          rel="noopener">Support the Equal Justice Initiative</a>
      </div>
    </div>
    <div class="go-Header-inner go-Header-inner--dark">
      <nav class="go-Header-nav">
        <a href="https://go.dev/" class="js-headerLogo" data-gtmc="nav link"
            data-test-id="go-header-logo-link">
          <img class="go-Header-logo" src="/static/shared/logo/go-white.svg" alt="Go">
        </a>
        <div class="go-Header-rightContent">
          {{template "symbol_search_bar" .}}
          <ul class="go-Header-menu">
            <li class="go-Header-menuItem">
              <a href="https://go.dev/solutions/" data-gtmc="nav link">Why Go</a>
            </li>
            <li class="go-Header-menuItem">
              <a href="https://go.dev/learn/" data-gtmc="nav link">Get Started</a>
            </li>
            <li class="go-Header-menuItem">
              <a href="https://golang.org/doc/" data-gtmc="nav link">Docs</a>
            </li>
            <li class="go-Header-menuItem go-Header-menuItem--active">
              <a href="/" data-gtmc="nav link">Packages</a>
            </li>
            <li class="go-Header-menuItem">
              <a href="https://play.golang.org/" data-gtmc="nav link">Play</a>
            </li>
            <li class="go-Header-menuItem">
              <a href="https://go.dev/blog/" data-gtmc="nav link">Blog</a>
            </li>
          </ul>
          <button class="go-Header-navOpen js-headerMenuButton go-Header-navOpen--white" data-gtmc="nav button" aria-label="Open navigation">
          </button>
        </div>
      </nav>
    </div>
  </header>
  <aside class="go-NavigationDrawer js-header">
    <nav>
      <div class="go-NavigationDrawer-header">
        <a href="https://go.dev/" tabindex="-1">
          <img class="go-NavigationDrawer-logo" src="/static/shared/logo/go-blue.svg" alt="Go.">
        </a>
      </div>
      <ul class="go-NavigationDrawer-list">
          <li class="go-NavigationDrawer-listItem">
            <a href="https://go.dev/solutions/" tabindex="-1">Why Go</a>
          </li>
          <li class="go-NavigationDrawer-listItem">
            <a href="https://go.dev/learn/" tabindex="-1">Get Started</a>
          </li>
          <li class="go-NavigationDrawer-listItem go-NavigationDrawer-listItem--active">
            <a href="/" tabindex="-1">Packages</a>
          </li>
          <li class="go-NavigationDrawer-listItem">
            <a href="https://go.dev/blog" tabindex="-1">Blog</a>
          </li>
      </ul>
    </nav>
  </aside>
  <div class="go-NavigationDrawer-scrim js-scrim" role="presentation"></div>
{{end}}

{{define "symbol_search_bar"}}
<div class="go-SearchForm js-searchForm">
  <form
    class="go-InputGroup go-ShortcutKey go-SearchForm-form"
    action="/search"
    data-shortcut="/"
    data-shortcut-alt="search"
    data-gtmc="search form"
    aria-label="Search for a package"
    role="search"
  >
    <input name="q" class="go-Input js-searchFocus" aria-label="Search for a package" type="search"
        autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"
        {{- if .Experiments.IsActive "symbol-search" -}} placeholder="Search packages or symbols"
        {{- else -}} placeholder="Search for a package"{{- end -}} value="{{.Query}}" />
    <input name="m" value="{{.SearchMode}}" hidden>
    <button class="go-Button go-Button--inverted" aria-label="Submit search">
      <img
        class="go-Icon"
        height="24"
        width="24"
        src="/static/shared/icon/search_gm_grey_24dp.svg"
        alt=""
      />
    </button>
  </form>
  <button class="go-SearchForm-expandSearch js-expandSearch" data-gtmc="nav button"
      aria-label="Open search" data-test-id="expand-search">
    <img class="go-Icon go-Icon--inverted" height="24" width="24"
        src="/static/shared/icon/search_gm_grey_24dp.svg" alt="">
  </button>
</div>
{{end}}