{% macro render_nav(nodes, current_url, depth=0) %}
<ul class="nav-list{% if depth == 0 %} nav-root{% endif %}">
  {% for node in nodes %}
  <li class="nav-item{% if node.children %} has-children{% endif %}{% if node.url == current_url %} active{% endif %}">
    {% if node.url %}
      <a class="nav-link{% if node.url == current_url %} active{% endif %}" href="{{ node.url }}">{{ node.title }}</a>
    {% else %}
      <details class="nav-section"{% if depth < 1 %} open{% endif %}>
        <summary class="nav-section-title">{{ node.title }}</summary>
        {% if node.children %}
          {{ render_nav(node.children, current_url, depth + 1) }}
        {% endif %}
      </details>
    {% endif %}
    {% if node.url and node.children %}
      {{ render_nav(node.children, current_url, depth + 1) }}
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endmacro %}

<aside class="sidebar" data-sidebar aria-label="Site navigation">
  <nav class="sidebar-nav">
    {{ render_nav(nav, page.url) }}
  </nav>
</aside>

<div class="sidebar-backdrop" data-sidebar-backdrop></div>