{% if api.navi is defined %}

    <style>
        #sidebar #side-navigation .side-menu li.lvl_deep_1 {
            padding-left: 10px!important;
        }
        #sidebar #side-navigation .side-menu li.lvl_deep_2 {
            padding-left: 30px!important;
        }
        #sidebar #side-navigation .side-menu li.lvl_deep_3 {
            padding-left: 50px!important;
        }
        #sidebar #side-navigation .side-menu li.lvl_deep_4 {
            padding-left: 70px!important;
        }
    </style>
    <div class="widget clearfix">
        <div class="widget-title">
            <a class="collapse-widget" href="#side-navigation" data-toggle="collapse">{{ title }}</a>
        </div><!-- end title -->

        <nav id="side-navigation" class="navbar collapse in" role="navigation" itemscope
             itemtype="https://schema.org/SiteNavigationElement"
        >
            <ul class="side-menu" role="menu">

                {% for nav in api.navi %}


                    {% if nav.lvl == 0  %}
                        <li {% if nav.active == 1 %} class ="active"{% endif %} role="menuitem"  itemprop="name">
                            <a itemprop="url" href="{{ nav.url }}" title="{{ nav.name }}">
                                {{ nav.name  }}
                            </a>
                        </li>
                    {% else %}
                        <li class="sub-menu-item{% if nav.active == 1 %} active{% endif %} lvl_deep_{{ nav.lvl }}" role="menuitem"  itemprop="name">

                            <i class="fa fa-star"></i>
                            <a itemprop="url" href="{{ nav.url }}" title="{{ nav.name }}">
                                {{  nav.name }}
                            </a>
                        </li>


                    {% endif %}

                    {#
                    {% if nav.children is defined  %}
                        {% for child in nav.children %}
                            <li class="sub-menu-item{% if child.active == 1 %} active{% endif %}" role="menuitem"  itemprop="name">
                                <i class="fa fa-star"></i>
                                <a itemprop="url" href="{{ child.url }}" title="{{ child.name }}">
                                    {{  child.name }}
                                </a>
                            </li>
                        {% endfor %}
                    {% endif %}
                   #}
                {% endfor %}
            </ul>
        </nav>
    </div>
{% endif %}