<!-- BEGIN: Side Menu -->
<nav class="side-nav">
    <ul>

        {% for item in staticMenu.menuItems %}

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

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

                {% for item in item.items %}

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

            </ul>
        </li>


        {% elseif not item.viewBag.isHidden %}

        <li>
            <a href="{{ item.url }}" class="side-menu {% if (item.isActive or item.isChildActive) %} side-menu--active {% else %} side-menu {% endif %} ">
                <div class="side-menu__icon"> <i data-lucide="{{item.viewBag.cssClass}}"></i> </div>
                <div class="side-menu__title"> {{ item.title }} </div>
            </a>
        </li>


        {% endif %} {% endfor %}

    </ul>
</nav>
<!-- END: Side Menu -->
