<div view-transition-name="sidebar" data-slot="sidebar-group" data-sidebar="group"
    class="relative flex w-full min-w-0 flex-col p-2 no-scrollbar">
    {% if nav|length > 1 %}

    {% if config.theme.topbar_sections %}
    {% set current = nav|active_section|attr('children') %}
    {% else %}
    {% set current = nav %}
    {% endif %}

    {% if not current %}
    {# when there is not active section, keep only the top level pages #}
    {% set current = nav|selectattr("is_page") %}
    {% endif %}

    {% set pages = current|selectattr("is_page")|sort(attribute="meta.order") %}
    {% set sections = current|rejectattr("is_page")|list %}

    {% if pages|length > 0 %}
    <div data-slot="sidebar-group" data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2">
        <div data-slot="sidebar-group-content" data-sidebar="group-content" class="w-full text-sm">
            <ul data-slot="sidebar-menu" data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-0.5">
                {% for page in pages %}
                {% with sidebar_item = page %}
                {% include "components/sidebar_item.html" %}
                {% endwith %}
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}

    {% for section in sections %}
    {% if section.children %}
    <div data-slot="sidebar-group" data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2">
        <div data-slot="sidebar-group-label" data-sidebar="group-label"
            class="ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 text-muted-foreground font-medium">
            {{ section.title }}</div>
        <div data-slot="sidebar-group-content" data-sidebar="group-content" class="w-full text-sm">
            <ul data-slot="sidebar-menu" data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-0.5">
                {% for sidebar_item in section.children|selectattr("is_page")|sort(attribute="meta.order") %}
                {% include "components/sidebar_item.html" %}
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}
    {% endfor %}


    {% endif %}
</div>