<div class="no-scrollbar h-full overflow-auto py-6 pr-4 lg:py-8 flex flex-col gap-1">
    {% if nav|length > 1 %}
    {% for top_item in nav %}

    {% if top_item.children %}
    <div class="flex flex-col gap-1">
        <h4 class="rounded-md px-2 py-1 text-sm font-semibold">{{ nav_item.title }} </h4>
        <div class="grid grid-flow-row auto-rows-max gap-0.5">
            {% for sidebar_item in top_item.children %}
            {% include "components/sidebar_item.html" %}
            {% endfor %}
        </div>
    </div>
    {% else %}
    {% with sidebar_item = top_item %}
    {% include "components/sidebar_item.html" %}
    {% endwith %}
    {% endif %}
    {% endfor %}
    </ul>
    {% endif %}
</div>