<a class="brand" href="/">
  <img class="link-logo" src="{{ relURL "brand.svg" }}" alt="Mastodon" />
</a>

<input id="mobile-nav-toggle" class="mobile-nav-toggle" type="checkbox">
<label for="mobile-nav-toggle">
    <span class="menu-open">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"/></svg>
    </span>
    <span class="menu-close">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18v-2h18v2zm0-5v-2h18v2zm0-5V6h18v2z"/></svg>
    </span>
</label>

<ul>
  {{ $currentPage := . }}
  {{ range .Site.Menus.docs.ByWeight }}
    <li>
      {{ if .Page }}
        <a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
      {{ else }}
        <span class="sub-title">{{ .Name }}</span>
      {{ end }}

      {{ if .HasChildren }}
        <ul class="sub-menu">
          {{ range .Children }}
            <li>
              <a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>

              {{ if .HasChildren }}
                <ul class="sub-menu">
                  {{ range .Children }}
                    <li>
                      <a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
                    </li>
                  {{ end }}
                </ul>
              {{ end }}
            </li>
          {{ end }}
        </ul>
      {{ end }}
    </li>
  {{ end }}
</ul>
