<!-- BEGIN: Mobile Menu -->
<div class="mobile-menu md:hidden">
    <div class="mobile-menu-bar">
        <a href="" class="flex mr-auto">
            <img alt="Midone - HTML Admin Template" style="width: 6.5rem;" src="{{'assets/logo_white.svg'|theme}}">
        </a>
        <a href="javascript:;" class="mobile-menu-toggler"> <i data-lucide="bar-chart-2"
                class="w-8 h-8 text-white transform -rotate-90"></i> </a>
    </div>
    <div class="scrollable">
        <a href="javascript:;" class="mobile-menu-toggler"> <i data-lucide="x-circle"
                class="w-8 h-8 text-white transform -rotate-90"></i> </a>
        <ul class="scrollable__content py-2">

           {% for item in staticMenu.menuItems %}

                {% if not item.viewBag.isHidden and item.items|length %}

                <li>
                    <a href="javascript:;" class="menu">
                        <div class="menu__icon"> <i data-lucide="{{item.viewBag.cssClass}}"></i> </div>
                        <div class="menu__title">
                            {{ item.title }}
                            <div class="menu__sub-icon"> <i data-lucide="chevron-down"></i> </div>
                        </div>
                    </a>
                    <ul {% if (item.isChildActive) %} class="menu__sub-open" {% endif %} >

                        {% for item in item.items %}

                            <li>
                                <a href="{{ item.url }}" class="menu">
                                    <div class="menu__icon"> <i data-lucide="activity"></i> </div>
                                    <div class="menu__title"> {{ item.title }} </div>
                                </a>
                            </li>
                        {% endfor %}

                    </ul>
                </li>


                {% elseif not item.viewBag.isHidden %}

                <li>
                    <a href="{{ item.url }}" class="menu">
                        <div class="menu__icon"> <i data-lucide="{{item.viewBag.cssClass}}"></i> </div>
                        <div class="menu__title"> {{ item.title }} </div>
                    </a>
                </li>

                {% endif %}
            {% endfor %}

        </ul>
    </div>
</div>
<!-- END: Mobile Menu -->
