hawkbit/docs/layouts/partials/header.html

<nav aria-label="Header">
  <div class="bar default">
    <div class="button button-menu" role="button" aria-label="Menu">
      <label class="toggle-button icon icon-menu" for="toggle-drawer">
        <span></span>
      </label>
    </div>
    <div class="stretch">
      <div class="title">
        {{ .Title | safeHTML }}
      </div>
    </div>

    {{ with .Site.Social.twitter }}
    <div class="button button-twitter" role="button" aria-label="Twitter">
       <a href="https://twitter.com/{{ . }}" title="@{{ . }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
    </div>
    {{ end }}

    {{ with .Site.Social.github }}
    <div class="button button-github" role="button" aria-label="GitHub">
      <a href="https://github.com/{{ . }}" title="@{{ . }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
    </div>
    {{ end }}

    {{ with .Site.Social.gitter }}
    <div class="button button-github" role="button" aria-label="Gitter">
      <a href="https://gitter.im/{{ . }}" title="@{{ . }} on Gitter" target="_blank" class="toggle-button icon fab fa-gitter"></a>
    </div>
    {{ end }}

    {{ with .Site.Social.docker }}
    <div class="button button-github" role="button" aria-label="Docker">
      <a href="https://hub.docker.com/u/{{ . }}" title="{{ . }} on Docker Hub" target="_blank" class="toggle-button icon fab fa-docker"></a>
    </div>
    {{ end }}
    
    <!-- TODO: disabled until Hugo supports the generation of a content index natively 
    <div class="button button-search" role="button" aria-label="Search">
      <label class="toggle-button icon icon-search" title="Search" for="toggle-search"></label>
    </div>
    -->    
  </div>
  <div class="bar search">
    <div class="button button-close" role="button" aria-label="Close">
      <label class="toggle-button icon icon-back" for="toggle-search"></label>
    </div>
    <div class="stretch">
      <div class="field">
        <input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
      </div>
    </div>
    <div class="button button-reset" role="button" aria-label="Search">
      <button class="toggle-button icon icon-close" id="reset-search"></button>
    </div>
  </div>
</nav>