    <!-- left sidebar -->
    <div class="nav-left-sidebar sidebar-dark">
        <div class="menu-list">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="d-xl-none d-lg-none" href="#">Dashboard</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav flex-column">

                        <li class="nav-divider">
                            MAIN
                        </li>

                        <ul class="nav flex-column submenu">
                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="dashboard" href=""><i class="fas fa-tachometer-alt"></i>Dashboard</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="booking-calendar" href=""><i class="fas fa-calendar-alt"></i>Booking Calendar</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="sessions-overview" href=""><i class="fas fa-fw fa-chart-pie"></i>Sessions</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="sessions-stats" href=""><i class="fas fa-chart-bar"></i>Statistics</a>
                            </li>
                        </ul>


                        <li class="nav-divider">
                            ADMIN
                        </li>

                        <ul class="nav flex-column submenu">

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="users-list" href=""><i class="fas fa-users"></i>Users</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="resources-list" href=""><i class="fas fa-boxes"></i>Resources</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="applications" href=""><i class="fas fa-rocket"></i>Applications</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="Reports" href=""><i class="fas fa-clipboard-list"></i>Reports</a>
                            </li>
                        </ul>

                        {% if is_devel %}
                        <li class="nav-divider">
                            << DEVELOPMENT >>
                        </li>

                        <ul class="nav flex-column submenu">
                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="booking-list" href=""><i class="fas fa-list-alt"></i>Booking List</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="applications-list" href=""><i class="fas fa-boxes"></i>Applications List</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="user-login" href="">Login</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="empty" href="">Empty page</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="forms-validation" href="">Forms Validation</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link nav-link-ajax" data-content-id="dashboard-finance" href="">Finance</a>
                            </li>

                        </ul>

                        {#Charts Examples#}
                        <li class="nav-item">
                            <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3"><i class="fas fa-fw fa-chart-pie"></i>Chart</a>
                            <div id="submenu-3" class="collapse submenu" style="">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link nav-link-ajax" data-content-id="chart-c3" href="">C3 Charts</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link nav-link-ajax" data-content-id="chart-chartist" href="">Chartist Charts</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link nav-link-ajax" data-content-id="chart-charts" href="">Chart</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link nav-link-ajax" data-content-id="chart-morris" href="">Morris</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link nav-link-ajax" data-content-id="chart-sparkline" href="">Sparkline</a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        {% endif %}

                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <!-- end left sidebar -->

