description = "Sidebar"

[viewBag]

[staticMenu]
code = "main-menu"
==
<?php
function onStart()
{
    
    $this->addJs('assets/vendor/perfect-scrollbar/js/perfect-scrollbar.min.js');
}
?>
==
<div id="sidebar" class="position-fixed w-80r pos-t-0 h-100 z-100 bg-white shadow-md">
    <a href="#" id="dismiss" class="display-11 d-block text-body text-center position-absolute pos-r-3 pos-t-3 w-5r h-5r line-height-tight">
        <i class="fas fa-times"></i>
    </a>
    <div class="sidebar-header p-3">
    <!-- Navbar brand -->
    {% partial "site/brand" %}
    </div>
    <div id="sidebar-nav" class="position-relative">
        <!-- Nav -->
        <div class="list-group panel">
            {% if staticMenu.menuItems %}
            {% set items = staticMenu.menuItems %}
            {% for item in items %}
            <a href="{{ item.items ? '#sidebarMenu' ~ item.title|replace({' ':'-'}) : item.url }}" class="list-group-item d-flex align-items-center display-13 border-0 rounded-0 bg-white text-link py-3 pr-8 pl-3 {{ item.isActive or item.isChildActive ? 'active' : '' }} {{ item.items ? 'collapsed' : '' }}" {% if item.items %}data-toggle="collapse" aria-expanded="false"{% endif %}>
                <i class="{{ 'fa-' in item.viewBag.cssClass ? item.viewBag.cssClass : 'far fa-dot-circle' }} mr-2 display-12"></i>
                <span>{{ item.title }}</span>
                {% if item.items %}
                <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-5r h-5r">
                    {{ item.items|length }}
                </span>
                {% endif %}
            </a>
            {% if item.items %}
            <div class="list-subgroup collapse" id="{{ 'sidebarMenu' ~ item.title|replace({' ':'-'}) }}" data-parent="#sidebar-nav">
                {% for subitem in item.items %}
                {% if ('banner1' in subitem.viewBag.cssClass) or ('banner2' in subitem.viewBag.cssClass) or ('banner3' in subitem.viewBag.cssClass) or ('banner4' in subitem.viewBag.cssClass) or ('banner5' in subitem.viewBag.cssClass) or ('banner6' in subitem.viewBag.cssClass) or ('banner7' in subitem.viewBag.cssClass) or ('banner8' in subitem.viewBag.cssClass) %}
                {% else %}
                <a href="{{ subitem.items ? '#sidebarMenuSub' ~ subitem.title|replace({' ':'-'}) : subitem.url }}" class="list-group-item d-flex align-items-center display-13 border-0 rounded-0 bg-white text-link py-3 pr-8 pl-6 {{ subitem.isActive or subitem.isChildActive ? 'active' : '' }}" {% if subitem.items %}data-toggle="collapse" aria-expanded="false"{% endif %}>
                    <i class="{{ 'fa-' in subitem.viewBag.cssClass ? item.viewBag.cssClass : 'far fa-dot-circle' }} display-14 mr-2"></i>
                    <span>{{ subitem.title }}</span>
                    {% if subitem.items %}
                    <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-5r h-5r">
                        {{ subitem.items|length }}
                    </span>
                    {% endif %}
                </a>
                {% endif %}
                {% if subitem.items %}
                <div class="list-subgroup collapse" id="{{ 'sidebarMenuSub' ~ subitem.title|replace({' ':'-'}) }}" data-parent="#{{ 'sidebarMenu' ~ item.title|replace({' ':'-'}) }}">
                    {% for child in subitem.items %}
                    <a href="{{ child.items ? '#sidebarMenuSubChild' ~ child.title|replace({' ':'-'}) : child.url }}" class="list-group-item d-flex align-items-center display-13 border-0 rounded-0 bg-white text-link py-3 pr-8 pl-9 {{ child.isActive or child.isChildActive ? 'active' : '' }}" {% if child.items %}data-toggle="collapse" aria-expanded="false"{% endif %}>
                        <i class="{{ 'fa-' in child.viewBag.cssClass ? item.viewBag.cssClass : 'far fa-dot-circle' }} display-14 mr-2"></i>
                        <span>{{ child.title }}</span>
                        {% if child.items %}
                        <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-5r h-5r">
                            {{ child.items|length }}
                        </span>
                        {% endif %}
                    </a>
                    {% if child.items %}
                    <div class="list-subgroup collapse" id="{{ 'sidebarMenuSubChild' ~ child.title|replace({' ':'-'}) }}" data-parent="#{{ 'sidebarMenuSub' ~ subitem.title|replace({' ':'-'}) }}">
                        {% for subchild in child.items %}
                        <a href="{{ subchild.url }}" class="list-group-item d-flex align-items-center display-13 border-0 rounded-0 bg-white text-link py-3 pr-8 pl-12 {{ subchild.isActive or subchild.isChildActive ? 'active' : '' }}">
                            <i class="{{ 'fa-' in subchild.viewBag.cssClass ? item.viewBag.cssClass : 'far fa-dot-circle' }} display-14 mr-2"></i>
                            <span>{{ subchild.title }}</span>
                            {% if subchild.items %}
                            <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-5r h-5r">
                                {{ subchild.items|length }}
                            </span>
                            {% endif %}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
                {% endfor %}
            </div>
            {% endif %}
            {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
<div class="sidebar-overlay d-none position-fixed pos-0 w-100 h-100 bg-black-50 opacity-0 z-50"></div>

<link href="{{ 'assets/vendor/perfect-scrollbar/css/perfect-scrollbar.css'|theme }}" rel="stylesheet">

{% put scripts %}
<script>
$(document).ready(function () {
    $('#dismiss, .sidebar-overlay').on('click', function () {
        // hide sidebar
        $('#sidebar').removeClass('active');
        // hide overlay
        $('.sidebar-overlay').removeClass('active d-block opacity-100');
		// animate icon
		$('#sidebarCollapse').removeClass('active');
    });

    $('#sidebarCollapse').on('click', function () {
        // open sidebar
        $('#sidebar').addClass('active');
        // fade in the overlay
        $('.sidebar-overlay').addClass('active d-block opacity-100');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
		$('.collapse.show').removeClass('show');
		// animate icon
		$('#sidebarCollapse').addClass('active');
    });
});

const ps = new PerfectScrollbar('#sidebar', {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
});
</script>
{% endput %}