{{ $.Scratch.Set "topLevel" . }}
{{ range .Site.Sections }}
  {{if $.CurrentSection}}
    {{ if .IsAncestor $.CurrentSection }}
      {{ $.Scratch.Set "topLevel" . }}
    {{end}}
  {{end}}
{{end}}

<nav class="row middle-xs between-xs">
  <div class="pull-left p-v-xs col-md-2s">
      <ul class="dropdown sub-menu unstyled">
        <li>
          <a href="{{ ($.Scratch.Get "topLevel").Permalink }}" class="btn bg-link p-a-0">
            <span class="p-h-xs">
            {{ range .Site.Sections }}
              {{if $.CurrentSection}}
                {{ if .IsAncestor $.CurrentSection }}
                  {{ .Params.shortTitle }}
                {{end}}
              {{end}}
            {{end}}
            </span>
            <i class="material-icons darken p-a-xs">keyboard_arrow_down</i>
          </a>

          <ul class="sub dropdown-menu bg-white unstyled">
          {{ range .Site.Sections }}
            <li><a href="{{ .Permalink }}">{{ .Params.shortTitle }}</a></li>
          {{ end }}
          <li><a href="https://rancher.com/docs/rancher/v1.6/en/" target="blank">Rancher 1.6</a></li>
          </ul>
        </li>
      </ul>
  </div>

  <!-- tabs -->
  <ul class="tabs col-md-10">
    {{ $topLevel := .Scratch.Get "topLevel"}}
    <li class="{{if (eq .Permalink $topLevel.Permalink)}}active{{end}}"><a href="{{$topLevel.Permalink}}"><i class="material-icons" style="position: relative; top: -2px;">home</i></a></li>
    {{ if $topLevel }}
      {{ range $topLevel.Sections }}
        {{ $isCurrent := .IsAncestor $.CurrentSection }}
        {{ if $isCurrent }}
          {{ $.Scratch.Set "secondLevel" . }}
        {{ end }}

        <li class="{{if $isCurrent}}active{{end}}"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
      {{ end }}
    {{ end }}
  </ul>
</nav>