<!-- ============================================== SIDEBAR ============================================== -->
<div class="col-xs-12 col-sm-12 col-md-3 sidebar"> 
        
    <!-- ================================== TOP NAVIGATION ================================== -->
    <div class="side-menu animate-dropdown outer-bottom-xs">
        <div class="head">
            <i class="icon fa fa-align-justify fa-fw"></i> Catégories
        </div>
        
        <nav class="yamm megamenu-horizontal">
            <ul class="nav">
                {% for groupe in groupes %}
                    <li class="dropdown menu-item"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="icon {{ groupe.getIconFontawesome() }}" aria-hidden="true"></i>{{ groupe.getNom() }}</a>
                        <ul class="dropdown-menu mega-menu">
                            <li class="yamm-content">
                                <div class="row">
                                    
                                    {% set categories = groupe.getCategories() %}
                                    {% set length = categories|length %}
                                    {% if length is divisible by(8) %}
                                        {% set nbrBloc = length % 8 %}
                                    {% else %}
                                        {% set nbrBloc = (length % 8) + 1 %}
                                    {% endif %}
                                    {% set starCate = 0 %}
                                    {% set endCate = 10 %}
                                    {% for i in 1..nbrBloc %}
       
                                        {% set endCate =  i * 10 %}
                                        <div class="col-sm-12 col-md-4">
                                            <ul class="links list-unstyled">
                                            {% for j in starCate..endCate %}
                                                {% if categories[j] is defined %}
                                                    <li><a href="{{ path('frontend_search_categorie', {id:categories[j].getId()} ) }}">{{ categories[j].getNom() }}</a></li>  
                                                {% endif %}  
                                            {% endfor %} 
                                            </ul>
                                        </div>
                                        {% set starCate = endCate + 1 %}
                                         
                                    {% endfor %}
                                
                                    {% if groupe.getImage() %}
                                        <div class="dropdown-banner-holder"> 
                                            <img alt="" src="{{ asset('uploads/images/groupes/' ~  groupe.getImage() ) }}" />
                                        </div>
                                    {% endif %}
                                </div>
                            </li>
                        </ul>
                    </li>
                {% endfor %}
            
            </ul>
            <!-- /.nav --> 
        </nav>
        
    <!-- /.megamenu-horizontal --> 
    </div>
    
    <!-- /.side-menu --> 
    <!-- ================================== TOP NAVIGATION : END ================================== --> 
</div>

