{% load static %}
<div x-data="{show_mobile_nav: false}">

    {# Toggle #}
    <span @click="show_mobile_nav = true" class="fs-4 cursor-pointer bi bi-list"></span>

    <div class="overlay"
         x-show="show_mobile_nav"
         x-on:click="show_mobile_nav = false"
         style="display: none;">
    </div>
    <div
            class="sidebar bg-app-side-bar px-2"
            x-show="show_mobile_nav"
            x-bind:class="{'show': show_mobile_nav}"
            x-on:click.away="show_mobile_nav = false"
            style="display: none;"
    >
        {# Logo #}
        <div class="text-center mb-3">
            <a href="/django_spire/static">
                <img
                    height="50px"
                    src="{% static 'core/img/logo/icon/django_skeleton_icon_head_small.png' %}" alt="Skully Head"
                    class="mt-3"
                >
                <div class="text-white">Django Skeleton</div>
            </a>
        </div>

        {#  Close Button  #}
        <i class="bi bi-x-lg text-white position-absolute top-0 end-0 m-2" type="button"
           x-on:click="show_mobile_nav = false"></i>

        {# Links #}
        <div>
            {% url 'landing:portfolio' as portfolio_url %}
            {% include 'landing/navigation/elements/mobile_nav_link.html' with link_title='Portfolio' link_icon='bi bi-briefcase' link_href=portfolio_url %}
        </div>
    </div>
</div>
