<div class="bgc-white br-8 overflow-hidden"> <div class="row max-0 pills-products position-relative"> <div class="col-4 px-0"> <div class="nav flex-column nav-pills bgc-fafafa pay-50 pax-30 c-0d8fc4-h" id="v-pills-tab" role="tablist" aria-orientation="vertical"> {% for key, category in getCategories() %} <a class="{{ (loop.first) ? 'activeProductLink ' }} d-flex c-212529 c-212529-h mab-5 bgc-F2F4F8-h position-relative transition pay-12 br-8 pointer w-100 cat-menu-link link-img-cat align-items-center c-44515d fs-18 fw-700 tdl-none-h c-0d8fc4-h {{ (loop.first) ? 'active' }}" id="v-pills-home-tab{{ loop.index }}" {# data-img="{{ category ? asset(vich_uploader_asset(category, 'categoryFile')) }}"#} data-toggle="pill" href="#v-pills-home{{ loop.index }}" role="tab" aria-controls="v-pills-home{{ loop.index }}" aria-selected="true" data-href="{{ path('front_products', {"catSlug":category.slug}) }}" > <div class="position-relative col-auto"> <img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone" class="he-44 {{category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue")}} "/> <img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}" alt="{{ category.title }}" class="img-white mahe-28 mawi-28 position-absolute t-0 b-0 w-auto l-0 r-0 m-auto img-white"/> </div> <div class="col"> <div data-link3> {{ category.title }} <div class="c-A0A2A6 link c-9DC771-h fs-13 fw-600 d-block allProductsLink" data-href="{{ path('front_products', {"catSlug":category.slug}) }}" > {{"menuProducts.allProducts.link"|trans}} </div> </div> </div> <div class="position-absolute wi-22 he-22 t-0 b-0 r-20 arrowProduct my-auto d-flex align-items-center justify-content-center"> <i class="fa-light fa-arrow-right c-9DC771"></i> </div> </a> {% endfor %} </div> </div> <div class="col-4 px-0 "> <div class="tab-content h-100 pay-40 pax-30 bgc-F2F4F8 position-relative" id="v-pills-tabContent"> {% for key, category in getCategories() %} <div class="tab-pane {{ (loop.first) ? 'show active ' }}" id="v-pills-home{{ loop.index }}" role="tabpanel" aria-labelledby="v-pills-home-tab{{ loop.index }}"> {% for key, subCategory in getSubCategories(category) %} <div id="accordionProducts{{ loop.index }}{{category.id}}" class="cat{{category.id}}Application{{ loop.index }}"> <div class=""> <div class="" id="headingOneProducts{{ loop.index }}{{category.id}}"> <div role="button" data-cat="{{category.id}}" data-app="{{ loop.index }}" class="c-7D7D7D headingOneProducts{{ loop.index }} {{ (loop.first) ? 'activeProductLink ' }} mab-3 cat-subMenu-link pax-20 position-relative c-333333-h d-flex bgc-E7ECF4-h position-relative transition pay-8 br-8 pointer w-100 fs-14 fw-600"> <div data-link3 class=""> {{ subCategory.title }} <div class="c-A0A2A6 c-9DC771-h fs-13 fw-600 d-table link allProductsLink" data-href="{{ path('front_sub_category', {"slug":subCategory.slug}) }}" > {{"menuProducts.allApplications.link"|trans}} </div> </div> <div class="position-absolute wi-22 he-22 t-0 b-0 r-20 arrowProduct my-auto d-flex align-items-center jusify-content-center"> <i class="fa-light fa-arrow-right c-9DC771"></i> </div> </div> </div> </div> </div> {% endfor %} </div> {% endfor %} </div> </div> <div class="col-4 px-0 bgc-DFE4EC"> {% for key, category in getCategories() %} <div class=" {{ (loop.first) ? 'catActive' }}"> {% for key, subCategory in getSubCategories(category) %} <div id="contentCat{{category.id}}Application{{ loop.index }}" class="{{ (loop.first) ? 'appActive' }} contentCat pay-60 pax-30"> {% for key, product in getProducts(subCategory) %} <div class="mab-24"> <a class="c-7D7D7D fw-600 fs-14 c-9DC771-h link-transform" href="{{ getProductUrl(product, subCategory) }}"> {{ product.title }} </a> </div> {% endfor %} </div> {% endfor %} </div> {% endfor %} </div> </div></div>