templates/section/nav.html.twig line 1

Open in your IDE?
  1. {# Barre de navigation principale ACTI #}
  2. <div class="topbar bg-acti-blue text-white py-1 small">
  3.     <div class="container d-flex justify-content-end gap-3">
  4.         <a><i class="fa fa-phone text-warning me-1"></i> 0596 56 25 20</a>
  5.         <a><i class="fa fa-envelope me-1"></i> contact@actiprotection.fr</a>
  6.     </div>
  7. </div>
  9. {# ─── NAVBAR ──────────────────────────────────────────────── #}
  10. <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom sticky-top shadow-sm">
  11.     <div class="container">
  13.         {# Logo #}
  14.         <a class="navbar-brand" href="{{ path('home') }}">
  15.             <img src="{{ asset('img/logo-acti.png') }}" height="60" alt="ACTI Protection">
  16.         </a>
  18.         {# Burger apparaissant < lg #}
  19.         <button class="navbar-toggler border-0" type="button"
  20.                 data-bs-toggle="collapse" data-bs-target="#mainNav"
  21.                 aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
  22.             <i class="fa fa-bars fs-4 text-acti-blue"></i>
  23.         </button>
  25.         {# Contenu repliable #}
  26.         <div class="collapse navbar-collapse" id="mainNav">
  28.             {# ––– Barre de recherche (centrée desktop, full-width mobile) ––– #}
  29.             <form action="{#{ path('app_search') }#}" method="get"
  30.                   class="d-lg-flex mx-lg-4 flex-grow-1 order-lg-2 my-3 my-lg-0">
  31.                 <div class="input-group w-100">
  32.                     <input type="search" name="q" class="form-control form-control-sm"
  33.                            placeholder="Rechercher un produit…"
  34.                            value="{#{ app.request.get('q') }#}">
  35.                     <button class="btn btn-outline-secondary btn-sm" type="submit">
  36.                         <i class="fa fa-search"></i>
  37.                     </button>
  38.                 </div>
  39.             </form>
  41.             {# ––– Menu principal ––– #}
  42.             <ul class="navbar-nav gap-lg-3 ms-lg-auto order-lg-1">
  43.                 <li class="nav-item"><a class="nav-link px-lg-2" href="{{ path('home') }}">Accueil</a></li>
  44.                 <li class="nav-item"><a class="nav-link px-lg-2" href="{#{ path('app_new_products') }#}">Nouveautés</a></li>
  45.                 <li class="nav-item"><a class="nav-link px-lg-2" href="{#{ path('app_category', {slug:'vetements'}) }#}">Vêtements</a></li>
  46.                 <li class="nav-item"><a class="nav-link px-lg-2" href="{#{ path('app_category', {slug:'chaussures'}) }#}">Chaussures</a></li>
  47.                 <li class="nav-item"><a class="nav-link px-lg-2" href="{#{ path('app_category', {slug:'equipements'}) }#}">Équipements</a></li>
  48.                 <li class="nav-item"><a class="nav-link px-lg-2" href="{#{ path('app_jobs') }#}">Métiers</a></li>
  49.                 <li class="nav-item">
  50.                     <a class="btn btn-primary btn-sm fw-bold ms-lg-2" href="{#{ path('app_destockage') }#}">
  51.                         Destockage
  52.                     </a>
  53.                 </li>
  54.             </ul>
  56.             {# ––– Icônes (hors collapse sur desktop, dedans sur mobile) ––– #}
  57.             <div class="d-flex gap-3 align-items-center mt-3 mt-lg-0 order-lg-3">
  58.                 <a href="{#{ path('app_account') }#}" class="text-dark"><i class="fa fa-user fa-lg"></i></a>
  59.                 <a href="{#{ path('app_favorites') }#}" class="text-dark"><i class="fa fa-heart fa-lg"></i></a>
  60.                 <a href="{#{ path('app_cart') }#}" class="text-dark position-relative">
  61.                     <i class="fa fa-shopping-bag fa-lg"></i>
  62.                    {#{% if cartCount>0 %}
  63.                         <span class="position-absolute top-0 start-100 translate-middle
  64.                                      badge rounded-pill bg-danger small">{{ cartCount }}</span>
  65.                     {% endif %}#} 
  66.                 </a>
  67.             </div>
  68.         </div>
  69.     </div>
  70. </nav>
  71. </header>