{% if section.children %}
  <details class="nav-group group"{% if section.is_active %} open{% endif %}>
    <summary title="{{ section.title }}" class="nav-item flex cursor-pointer items-center gap-3 px-3 py-2 text-sm text-slate-400 transition hover:bg-white/5 hover:text-white">
      {% include 'partials/icon.html' with icon=section.section.icon|default:fallback_icon %}
      <span class="nav-label">{{ section.title }}</span>
      <span aria-hidden="true" class="nav-chevron ml-auto text-xs transition group-open:rotate-90">&rsaquo;</span>
    </summary>
    <div class="nav-sub mt-1 space-y-1 border-l border-white/10 pl-3">
      {% for child in section.children %}
        <a href="{% url child.url_name %}" title="{{ child.description|default:child.title }}"
           {% if child.is_active %}aria-current="page"{% endif %}
           class="nav-item flex items-center gap-3 px-3 py-2 text-sm transition
                  {% if child.is_active %}bg-brand-600 text-white{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
          {% include 'partials/icon.html' with icon=child.section.icon|default:fallback_icon %}
          <span class="nav-label">{{ child.title }}</span>
        </a>
      {% endfor %}
    </div>
  </details>
{% else %}
  <a href="{% url section.url_name %}" title="{{ section.description|default:section.title }}"
     {% if section.is_active %}aria-current="page"{% endif %}
     class="nav-item flex items-center gap-3 px-3 py-2 text-sm transition
            {% if section.is_active %}bg-brand-600 text-white{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
    {% include 'partials/icon.html' with icon=section.section.icon|default:fallback_icon %}
    <span class="nav-label">{{ section.title }}</span>
  </a>
{% endif %}