{% macro sidenav_item(doc, node) %}
<ol>
    {%- for item in node.children -%}

    {# section node #}
    {%- if item.children -%}
    <li class="expandable {% if item.active %}active{% endif %}">
        <details {% if item.active %}open{% endif %}>
            <summary>{{ item.title }} <svg focusable="false" class="docs-icon" aria-hidden="true"> <use href="#docs-icon-arrow-down"></use></svg></summary>
            {% if item.children.length > 0 %}
            {{ sidenav_item(doc, item) }}
            {% endif %}
        </details>
    </li>
    {%- endif -%}

    {# leaf node #}
    {%- if not item.children -%}
    <li class="link {% if item.active %}active{% endif %}">
        <a
            href="{{ item.path | relative(doc) }}"
            {% if item.external %}
            target="_blank"
            rel="external"
            {% endif %}
            {% if item.path.startsWith('/') %}
            data-path="{{ item.path.slice(1) }}"
            {% endif %}
            {% if item.path.startsWith('./') %}
            data-path="{{ item.path.slice(2) }}"
            {% endif %}
        >
            {{ item.title }}
        </a>
    </li>
    {%- endif -%}

    {%- endfor -%}
</ol>
{% endmacro %}

{% macro sidenav(doc, node, label) %}
<input type="checkbox" class="sidenav__toggle" aria-label="Open/close navigation" />
<nav class="navigation" aria-label="{{ label }}">{{ sidenav_item(doc, node) }}</nav>
{% endmacro %}