{% load static %}
{% block dashboard_sidebar %}

<nav id="navSidebar" role="navigation" class="col-lg-3 col-md-4 px-4 py-3 sidebar sidebar-nav fixed-left sticky-top sidebar-display border-end status-dashboard-subscription-grey-bg">

    <div class="col-md-8 offset-lg-3">
        <div class="sidebar-brand w-100 ps-2 mt-2">
            <a href="https://docs.taskcallapp.com" id="sidebarBrand" class="inline align-middle size-20 emphasized-col-text"> DOCS </a>

            <button id="btnToggler" class="navbar-toggler sidebar-toggler pe-3 float-end" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent" aria-controls="sidebarContent" aria-expanded="false">
                <span class="feather-24" data-feather="menu"></span>
            </button>
        </div>

        <div id="sidebarContent" class="collapse navbar-collapse">
            <div class="doc-list-navbar">
                <ul id="dashboard-sidebar" class="nav flex-column pt-3 pb-5">

                    {% for item in nav_content %}
                        <li id="{{ item.main_menu_id }}" class="nav-item py-2">
                            <a class="nav-link main-item collapsed" href="#{{ item.sub_menu_id }}" data-toggle="collapse" data-target="#{{ item.sub_menu_id }}">
                                {{ item.main_menu_title }}
                            </a>
                            <div class="py-2" id="{{ item.sub_menu_id }}" aria-expanded="false">
                                <ul class="flex-column nav">
                                    {% for sub_item in item.sub_menu_items %}
                                        <li class="nav-item">
                                            <a id="{{ sub_item.sub_item_id }}" class="nav-link sub-item" href="{{ sub_item.url }}"> {{ sub_item.name }} </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

</nav>



<script nonce="{{ CSP_NONCE }}">
    if (screen.width <= 480){
        document.getElementById('sidebarContent').setAttribute('class', 'collapse');
        document.getElementById('btnToggler').hidden = false;
        document.getElementById('sidebarBrand').hidden = false;
    } else {
        document.getElementById('sidebarContent').removeAttribute('class');
        document.getElementById('btnToggler').hidden = true;
        document.getElementById('sidebarBrand').hidden = true;
    }
</script>

{% endblock %}