<div class="main-nav">
    <div class="nav-top">
        <ul class="nav nav-pills flex-column bg-nav">
            <% for (const index in ctx.menuList) { %>
            <% if (ctx.menuList[index].display === undefined || !ctx.menuList[index].display) { continue } %>
            <li class="nav-item <% if(ctx.controllerName === index) { %>active<% } %>">
                <a href="<%= ctx.menuList[index].children === null ? ctx.menuList[index].url : 'javascript:void(0);' %>" data-toggle="tooltip" data-placement="right" title="<%= ctx.menuList[index].name %>">
                    <i class="fa <%= ctx.menuList[index].icon %>"></i>
                    <span><%= ctx.menuList[index].name %></span>
                    <% if (ctx.menuList[index].children !== null) { %>
                    <i class="fa fa-angle-down pull-right menu-arrow"></i>
                    <% } %>
                </a>
                <% if (ctx.menuList[index].children !== null) { %>
                <ul class="sub-menu" <% if(ctx.controllerName === index) { %>style="display: block;"<% }%>>
                    <% for (const childIndex in ctx.menuList[index].children) { %>
                    <li><a href="<%= ctx.menuList[index].children[childIndex].url %>"><%= ctx.menuList[index].children[childIndex].name %></a></li>
                    <% } %>
                </ul>
                <% } %>
            </li>
            <% } %>
        </ul>
    </div>
</div>