{#
  Recursive: nav depth is unbounded, so a section includes this same template
  for each of its children. The inner `for` rebinds `nav_item` in loop scope,
  which is what makes the recursion work (same trick as mkdocs-basic-theme).
#}
{#
  How deep this item sits, counted from the top of the tree. The stylesheet
  spends it on the label's padding rather than on the container holding the
  items, so a nested row keeps the full width of the list and every fill and
  every current-item bar in the tree stands on the same left edge. `include`
  hands the included template a copy of this context, which is what carries the
  count down; a copy is also why nothing assigned in there comes back up.
#}
{%- set depth = depth | default(0) %}
{%- if nav_item.children %}
  {#
    `data-primer-nav-open` is the section's expanded state, and the only one.
    The stylesheet hides the children of a section without it once the document
    is known to be scriptable, and js/nav-sections.js moves the attribute when
    the reader works the toggle. With no JavaScript nothing is hidden and every
    section stays open, which is what this nav did before.
  #}
  <div class="primer-nav-section"{{ ' data-primer-nav-open' if nav_item.active }}>
    {#
      A section normally has no url. mkdocs-section-index gives it one by
      folding the section's index page into the section itself, and then the
      label is the only route to that page — rendering it as inert text drops
      the page out of the nav entirely.
    #}
    {#
      `active` is true for a section anywhere above the current page, which is
      the only signal the tree has for "you are in here" — the leaf item's
      aria-current says nothing about its ancestors.
    #}
    {%- set section_label_class = 'primer-nav-section-label' ~ (' primer-nav-section-label-active' if nav_item.active else '') %}
    {# The row the toggle button is appended to; on its own it lays out as the label did. #}
    <div class="primer-nav-section-header">
      {%- if nav_item.url %}
        <a class="{{ section_label_class }}"
           {% if depth %}style="--primer-nav-depth: {{ depth }}"{% endif %}
           href="{{ nav_item.url | url }}"
           {% if nav_item == page %}aria-current="page"{% endif %}>{{ nav_item.title }}</a>
      {%- else %}
        <div class="{{ section_label_class }}"
             {% if depth %}style="--primer-nav-depth: {{ depth }}"{% endif %}>{{ nav_item.title }}</div>
      {%- endif %}
    </div>
    <div class="primer-nav-section-items">
      {%- set depth = depth + 1 %}
      {%- for nav_item in nav_item.children %}
        {% include "partials/nav-item.html" %}
      {%- endfor %}
    </div>
  </div>
{%- else %}
  <a class="SideNav-item"
     {% if depth %}style="--primer-nav-depth: {{ depth }}"{% endif %}
     href="{{ nav_item.url | url }}"
     {% if nav_item.active %}aria-current="page"{% endif %}>{{ nav_item.title }}</a>
{%- endif %}