docs-nav.html

{% set navSection = eleventyNavigation.parent or eleventyNavigation.key %}
{% set navSections = collections[collection] | eleventyNavigation -%}

{# Is this page one of the first 3 sections? If so, expand first 3 sections #}
{% if
    navSection == "Introduction" or
    navSection == 'Components' or
    navSection == 'Templates'
%}
{% set expandFirstThree = true %}
{% endif %}

{% for section in navSections %}

  {# Are any children in this section active? #}
  {% set sectionActive = false %}
  {% for child in section.children %}
    {% if child.url == page.url %}
      {% set sectionActive = true %}
    {% endif %}
  {% endfor %}

  {% if section.children | length %}
    {% set isFirstThree = section.order < 4 %}
    {% set shouldExpand = expandFirstThree and isFirstThree %}
    {% set shouldExpand = sectionActive or shouldExpand %}

    <details
      class="wrapper section-collapse{% if sectionActive %} activeSection{% endif %}"
      {% if shouldExpand %}open{% endif %}>
      <summary class="sectionHead{% if section.url == page.url %} active{% endif %}">
        <span aria-hidden="true" class="marker">›</span>{{ section.title }}
        {% if section.labs == true %}
          <img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
        {% endif %}
      </summary>
      <ol>
      {% for child in section.children %}
        <li{% if child.url == page.url %} class="active"{% endif %}>
          <a href="{{ child.url | url }}">
            {{ child.title }}
            {% if child.labs == true or child.labs == "true" %}
              <img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
            {% endif %}
          </a>
        </li>
      {% endfor %}
      </ol>
    </details>
  {% else %}
      <a href="{{ section.url | url }}">{{ section.title }}</a>
  {% endif %}
{% endfor %}