{{/*
  The top bar: logo, the site's pages, and the two actions (source and
  install). Sticky on every screen; below 1080px 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="CoreDesktop, home">
      <img src="{{ "images/coredesktop-logo.svg" | relURL }}" alt="CoreDesktop" class="brand-logo" width="873" height="129">
    </a>

    <nav class="head-nav" aria-label="Site">
      {{ range .Site.Menus.main }}
        <a href="{{ .URL | relURL }}" class="nav-link"{{ if hasPrefix $page.RelPermalink .URL }} aria-current="page"{{ end }}>{{ .Name }}</a>
      {{ end }}
    </nav>

    <div class="head-actions">
      <a href="{{ site.Params.repoUrl }}" class="head-signin">Source<span class="arrow" aria-hidden="true">↗</span></a>
      <a href="{{ "/install/" | relURL }}" class="btn btn-primary btn-sm">Install</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">
        <a href="{{ "/" | relURL }}" class="menu-top">Home</a>
        {{ range .Site.Menus.main }}
          <a href="{{ .URL | relURL }}" class="menu-top">{{ .Name }}</a>
        {{ end }}
        <div class="menu-actions">
          {{ partial "sections/ctas.html" (slice (dict "label" "Install" "url" "/install/" "style" "primary") (dict "label" "Source on Gitea" "url" site.Params.repoUrl "style" "ghost")) }}
        </div>
      </nav>
    </details>
  </div>
</header>