{{define "about_subnav"}}
<aside class="about-side-nav" aria-label="{{t .View "aboutNav.label"}}">
  {{/* Mobile: jump select */}}
  <div class="about-side-nav__mobile md:hidden">
    <label for="about-jump" class="field-label">{{t .View "aboutNav.jumpLabel"}}</label>
    <select id="about-jump" class="input-field" onchange="if (this.value) window.location.href = this.value">
      {{range .NavGroups}}
      <optgroup label="{{index . "label"}}">
        {{range asMaps (index . "links")}}
        {{$href := printf "%v" (index . "href")}}
        <option value="{{$href}}" {{if eq $.Active $href}}selected{{end}}>{{index . "label"}}</option>
        {{end}}
      </optgroup>
      {{end}}
    </select>
  </div>

  {{/* Desktop: sticky side rail */}}
  <nav class="about-side-nav__rail hidden md:block" aria-label="{{t .View "aboutNav.label"}}">
    {{range .NavGroups}}
    <div class="about-side-nav__group">
      <p class="about-side-nav__group-label">{{index . "label"}}</p>
      <ul class="about-side-nav__list">
        {{range asMaps (index . "links")}}
        {{$href := printf "%v" (index . "href")}}
        <li>
          <a href="{{$href}}"
             class="about-side-nav__link{{if eq $.Active $href}} is-active{{end}}"
             {{if eq $.Active $href}}aria-current="page"{{end}}>
            {{index . "label"}}
          </a>
        </li>
        {{end}}
      </ul>
    </div>
    {{end}}
  </nav>
</aside>
{{end}}