{{/*
  The top bar: logo, the site's pages (with dropdown panels for menus that
  set `dropdown`), and the two account actions. Sticky on every screen;
  below 1000px the pages fold into a Menu toggle (a <details>, so it works
  without JS).
*/}}
{{ $page := . }}
<header class="site-head">
  <div class="wrap head-bar">
    <a href="{{ "/" | relURL }}" class="brand" aria-label="Federated Computer, home">
      <img src="{{ "images/logo.png" | relURL }}" alt="Federated Computer" class="brand-logo" width="775" height="129">
    </a>

    <nav class="head-nav" aria-label="Site">
      {{ range .Site.Menus.main }}
        {{ if ne .URL "/" }}
        {{ $m := . }}
        {{ $active := hasPrefix $page.RelPermalink .URL }}
        {{ with .Params.dropdown }}
          <div class="nav-item has-drop">
            <a href="{{ $m.URL | relURL }}" class="nav-link"{{ if $active }} aria-current="page"{{ end }}>{{ $m.Name }}<svg class="nav-caret" viewBox="0 0 10 6" width="10" height="6" aria-hidden="true"><path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></a>
            <div class="drop">
              <div class="drop-panel">
                {{ range index $page.Site.Menus . }}
                  <a href="{{ .URL | relURL }}" class="drop-link"{{ if eq $page.RelPermalink .URL }} aria-current="page"{{ end }}>
                    <span class="drop-name">{{ .Name }}</span>
                    {{ with .Params.desc }}<span class="drop-desc">{{ . }}</span>{{ end }}
                  </a>
                {{ end }}
              </div>
            </div>
          </div>
        {{ else }}
          <a href="{{ $m.URL | relURL }}" class="nav-link"{{ if $active }} aria-current="page"{{ end }}>{{ $m.Name }}</a>
        {{ end }}
        {{ end }}
      {{ end }}
    </nav>

    <div class="head-actions">
      <a href="{{ "/sign-in/" | relURL }}" class="head-signin"{{ if eq $page.RelPermalink "/sign-in/" }} aria-current="page"{{ end }}>Sign in</a>
      <a href="{{ "/start-now/" | relURL }}" class="btn btn-primary btn-sm">Start now</a>
    </div>

    <details class="menu">
      <summary><span class="menu-word">Menu</span><span class="menu-glyph" aria-hidden="true"><i></i><i></i></span></summary>
      <nav class="menu-panel" aria-label="Site">
        {{ range .Site.Menus.main }}
          <a href="{{ .URL | relURL }}" class="menu-top">{{ .Name }}</a>
          {{ with .Params.dropdown }}
            <div class="menu-sub">
              {{ range index $page.Site.Menus . }}<a href="{{ .URL | relURL }}">{{ .Name }}</a>{{ end }}
            </div>
          {{ end }}
        {{ end }}
        <div class="menu-actions">
          {{ partial "sections/ctas.html" (slice (dict "label" "Start Now" "url" "/start-now/" "style" "primary") (dict "label" "Sign In" "url" "/sign-in/" "style" "ghost")) }}
        </div>
      </nav>
    </details>
  </div>
</header>