{{/* the theme's header, with the active section, the forum link and the search box */}}
{{ $current := . }}
<header class="header">
  <div class="header__inner">
    <div class="header__logo">
      <a href="{{ site.Home.RelPermalink }}"><div class="logo">old-computers.com</div></a>
    </div>
    <ul class="menu menu--mobile">
      <li class="menu__trigger">Menu&nbsp;▾</li>
      <li>
        <ul class="menu__dropdown">
          {{ range site.Menus.main }}<li><a href="{{ .URL }}">{{ .Name }}</a></li>{{ end }}
          {{ with site.Params.forum.url }}<li><a href="{{ . }}">Forum</a></li>{{ end }}
        </ul>
      </li>
    </ul>
  </div>
  <nav class="navigation-menu">
    <ul class="navigation-menu__inner menu--desktop">
      {{ range site.Menus.main }}
      <li><a href="{{ .URL }}"{{ if or ($current.IsMenuCurrent .Menu .) ($current.HasMenuCurrent .Menu .) (eq $current.Section .Page.Section) }} class="active" aria-current="true"{{ end }}>{{ .Name }}</a></li>
      {{ end }}
      {{ with site.Params.forum.url }}<li><a href="{{ . }}">Forum</a></li>{{ end }}
    </ul>
    {{/* outside the list: the list is hidden on small screens, the search box is not */}}
    <form class="search" role="search" action="{{ "search/" | relURL }}" method="get">
      <input type="search" name="q" placeholder="search…" aria-label="Search the site">
    </form>
  </nav>
</header>