<div id="navWrapper" class="overflow-y-auto z-20 xl:z-10 px-2 md:px-6 mt-16 md:mt-12 h-full bg-neutral-primary sm:bg-transparent scrolling-touch max-w-2xs lg:h-[calc(100vh-3rem)] lg:block lg:sticky top:24 lg:top-28 lg:mr-0">
  <nav id="nav" class="pt-16 px-1 pl-3 lg:pl-0 lg:pt-2 font-normal text-base lg:text-sm pb-10 lg:pb-20 sticky?lg:h-(screen-18)" aria-label="Docs navigation">
    {{- $url := split .Permalink "/" -}}
    {{- $page_slug := index $url (sub (len $url) 2) -}}

    <ul class="mb-0 list-unstyled">
    {{- range $group := .Site.Data.sidebar -}}
      {{- $link := $group.title -}}
      {{- $link_slug := $link | urlize -}}
  
      {{- if $group.pages -}}
        {{- $link = index $group.pages 0 -}}
        {{- $link_slug = $link.title | urlize -}}
      {{- end -}}
  
      {{- $group_slug := $group.slug -}}
      {{- $is_active_group := eq $.Page.Params.group $group_slug -}}
  
      {{- if $group.pages }}
        <li class="mt-8">
          <h5 class="mb-2 font-medium tracking-widest uppercase text-xs text-heading">{{ $group.title }}</h5>
          <ul class="py-1 list-unstyled fw-normal small">
            {{- range $doc := $group.pages -}}
              {{- $doc_slug := "" -}}
              {{- if $doc.slug -}}
                {{- $doc_slug = $doc.slug -}}
              {{- else -}}
                {{- $doc_slug = $doc.title | urlize -}}
              {{- end -}}
              {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
              {{- $href := printf "/docs/%s/%s/" $group_slug $doc_slug }}
              <li>
                <a href="{{ $href }}" data-sidebar-item class="py-2 transition-colors duration-200 relative flex items-center flex-wrap font-medium hover:text-heading text-body {{ if $is_active }} !text-fg-brand hover:!text-fg-brand-strong{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }} {{ if ( eq $doc.new true) }}<span><span class="ml-2 bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1 py-0.5 rounded">New</span></span>{{ end }}</a>
              </li>
            {{- end }}
          </ul>
        </li>
      {{- else }}
        <li class="mx-4 my-3 border-top"></li>
        <li>
          <a href="/{{ $group_slug }}/" data-sidebar-item class="d-inline-flex align-items-center {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
            {{ $group.title }}
          </a>
        </li>
      {{- end }}
    {{- end }}
    </ul>
  </nav>
</div>

