{% load static %}

<div class="d-lg-none" x-data="{ collapsed: false, show_mobile_nav: false }">
    <i
        class="bi bi-list fs-4 cursor-pointer me-2"
        @click="show_mobile_nav = !show_mobile_nav"
    ></i>

    <div
        x-show="show_mobile_nav"
        x-cloak
        x-transition.opacity.duration.300ms
        x-effect="document.body.style.overflow = show_mobile_nav ? 'hidden' : ''"
        class="position-fixed top-0 start-0 w-100 side-navigation overflow-y-auto"
        style="z-index: 1050; height: 100vh; height: 100dvh; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px);"
    >
        <div class="d-flex justify-content-between align-items-center px-3" style="height: 64px;">
            <span class="fw-semibold">Navigation</span>
            <i
                class="bi bi-x-lg fs-6 cursor-pointer"
                @click="show_mobile_nav = false"
            ></i>
        </div>

        <ul class="nav nav-pills flex-column mx-1 px-2">
            {% block mobile_navigation_links %}
                {% include 'django_spire/navigation/navigation_links.html' %}
            {% endblock %}
        </ul>
    </div>
</div>
