templates/partials/navbar.html.twig line 1

Open in your IDE?
  1. {% import 'partials/avatar.html.twig' as avatar %}
  2. <nav class="navbar fixed-top navbar-expand-lg bg-dark-subtle double-border-bottom">
  3.     <div class="container">
  4.         <a class="navbar-brand" href="{{ path('app_home') }}">
  5.             <img src="{{ asset('images/logo.png') }}" alt="Logo HaloGari" class="img-fluid" style="max-width: 120px; height:auto;">
  6.         </a>
  8.         <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  9.             <li class="nav-item align-self-center d-none d-lg-block">
  10.                 <div class="d-flex gap-2 align-items-center">
  11.                     <button class="installAppBtn px-1 btn btn-orange d-none nav-link" title="Installer HaloGari">
  12.                         <i class="bi bi-download"></i>
  13.                         Installer HaloGari
  14.                     </button>
  15.                     <button class="btnEnableNotifications nav-link  btn btn-vert d-none px-1">
  16.                         <i class="bi bi-bell-fill"></i>
  17.                         Activer les notifications
  18.                     </button>
  19.                 </div>
  20.             </li>
  22.             <li class="nav-item align-self-center d-none d-lg-block">
  23.                 <a class="btn nav-link" href="{{ path('app_chercher') }}" title="Chercher un trajet">
  24.                     <i class="text-vert bi bi-search"></i>
  25.                     Chercher un trajet
  26.                 </a>
  27.             </li>
  28.             <li class="nav-item align-self-center d-none d-lg-block">
  29.                 <a class="btn nav-link" href="{{ path('app_publier') }}">
  30.                     <i class="bi bi-plus-circle"></i>
  31.                     Publier un trajet
  32.                 </a>
  33.             </li>
  35.             {% if app.user %}
  36.                 <li class="nav-item align-self-center d-none d-lg-block position-relative mx-4">
  37.                     <a class="nav-link position-relative" href="{{ path('app_message') }}" title="Messages">
  38.                         <i class="bi bi-envelope-fill fs-5"></i>
  39.                         <span class="message-notif position-absolute start-100 translate-middle badge rounded-circle bg-danger" style="display: none; top: 20%;">
  40.                             0
  41.                         </span>
  42.                     </a>
  43.                 </li>
  45.                 <li class="nav-item dropdown align-self-center d-none d-lg-block position-relative me-3">
  46.                     <a class="nav-link dropdown-toggle no-caret position-relative" href="#" id="notifDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  47.                         <i class="bi bi-bell-fill fs-5"></i>
  48.                         <span class="notification-badge position-absolute start-100 translate-middle badge rounded-circle bg-danger" style="display: none; top: 20%;">
  49.                             0
  50.                         </span>
  51.                     </a>
  53.                     <ul class="dropdown-menu dropdown-menu-end shadow-sm p-2" id="notifDropdownMenu" aria-labelledby="notifDropdown" style="min-width: 300px;">
  54.                         {% include 'partials/_notifications_list.html.twig' with {
  55.             notifications: app.user.notifications|filter(notif => not notif.lu)
  56.         } %}
  57.                     </ul>
  58.                 </li>
  60.             {% endif %}
  62.             <li class="nav-item d-none d-lg-block align-items-center">
  63.                 {% if app.user is null %}
  64.                     <a class="btn nav-link" href="#" data-bs-toggle="modal" data-bs-target="#modalConnexion" title="Se connecter">
  65.                         <i class="bi bi-box-arrow-in-right"></i>
  66.                         Se connecter
  67.                     </a>
  68.                 {% else %}
  69.                     <a class="btn dropdown-toggle text-vert py-0" href="#" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
  70.                         {{ avatar.formatSimple(app.user, 40) }}
  71.                     </a>
  72.                 {% endif %}
  73.             </li>
  74.         </ul>
  76.         {# Mobile buttons #}
  77.         {% if app.user %}
  78.             <div class="position-relative d-lg-none me-4 d-inline-block">
  79.                 <a class="nav-link" href="{{ path('app_message') }}" title="Messages">
  80.                     <i class="bi bi-envelope-fill fs-5"></i>
  81.                 </a>
  82.                 <span class="message-notif position-absolute top-0 start-100 translate-middle badge rounded-circle bg-danger" style="display: none;">
  83.                     0
  84.                 </span>
  85.             </div>
  86.             <div class="position-relative d-lg-none me-3 d-inline-block">
  87.                 <a class="nav-link" href="{{ path('app_notifications') }}" title="Notifications">
  88.                     <i class="bi bi-bell-fill fs-5"></i>
  89.                 </a>
  90.                 <span class="notification-badge position-absolute top-0 start-100 translate-middle badge rounded-circle bg-danger" style="display: none;">
  91.                     0
  92.                 </span>
  93.             </div>
  94.         {% endif %}
  96.         <a class="btn text-vert d-lg-none py-0 {% if app.user is not null %}dropdown-toggle{% endif %}" href="#" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
  97.             {% if app.user is null %}
  98.                 <i class="bi bi-list fs-3"></i>
  99.             {% else %}
  100.                 {{ avatar.formatSimple(app.user, 40) }}
  101.             {% endif %}
  102.         </a>
  103.     </div>
  104. </nav>
  107. <div class="offcanvas offcanvas-end bg-dark-subtle" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  108.     {% if app.user is null %}
  109.         <div class="offcanvas-header">
  110.             <div id="offcanvasRightLabel">
  111.                 <p><img src="{{ asset('images/logo.png') }}" alt="Logo HaloGari" class="img-fluid" style="max-width: 120px; height:auto;"></p>
  112.             </div>
  113.             <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  114.         </div>
  115.         <div class="offcanvas-body">
  116.             <div class="list-group list-group-flush">
  117.                 <a href="{{ path('app_chercher') }}" class="list-group-item list-group-item-action bg-dark-subtle" title="Chercher un trajet">
  118.                     <i class="text-vert bi bi-search"></i>
  119.                     Chercher un trajet
  120.                 </a>
  121.                 <a href="{{ path('app_publier') }}" class="list-group-item list-group-item-action bg-dark-subtle" title="Publier un trajet">
  122.                     <i class="bi bi-plus-circle"></i>
  123.                     Publier un trajet
  124.                 </a>
  125.                 <a class="list-group-item list-group-item-action bg-dark-subtle" href="#" data-bs-toggle="modal" data-bs-target="#modalConnexion" title="Se connecter">
  126.                     <i class="bi bi-box-arrow-in-right"></i>
  127.                     Se connecter
  128.                 </a>
  129.                 <div class="list-group-item list-group-item-action bg-dark-subtle d-block d-lg-none">
  130.                     <div class="d-flex justify-content-center gap-2 flex-wrap">
  131.                         <button class="installAppBtn px-1 btn btn-orange d-none" title="Installer HaloGari">
  132.                             <i class="bi bi-download"></i>
  133.                             Installer HaloGari
  134.                         </button>
  135.                         <button class="btnEnableNotifications btn btn-vert d-none">
  136.                             <i class="bi bi-bell-fill"></i>
  137.                             Activer les notifications
  138.                         </button>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.     {% else %}
  144.         <div class="offcanvas-header">
  145.             <div id="offcanvasRightLabel">
  146.                 <p><img src="{{ asset('images/logo.png') }}" alt="Logo HaloGari" class="img-fluid" style="max-width: 120px; height:auto;"></p>
  147.                 <h5>
  148.                     Bonjour
  149.                     {% if app.user is not null %}
  150.                         {{ app.user.prenom|e }},
  151.                     {% endif %}
  152.                 </h5>
  153.             </div>
  155.             <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  156.         </div>
  157.         <div class="offcanvas-body">
  158.             <div class="list-group list-group-flush">
  159.                 <a href="{{ path('app_chercher') }}" class="list-group-item list-group-item-action bg-dark-subtle d-block d-lg-none">
  160.                     <i class="text-vert bi bi-search"></i>
  161.                     Chercher un trajet
  162.                 </a>
  164.                 <a href="{{ path('app_publier') }}" class="list-group-item list-group-item-action bg-dark-subtle d-block d-lg-none">
  165.                     <i class="bi bi-plus-circle"></i>
  166.                     Publier un trajet
  167.                 </a>
  169.                 <a href="{{ path('app_profile', { id: app.user.id }) }}" class="list-group-item list-group-item-action bg-dark-subtle">
  170.                     <i class="bi bi-person"></i>
  171.                     Mon profil
  172.                 </a>
  174.                 <a href="{{ path('app_mes_trajets') }}" class="list-group-item list-group-item-action bg-dark-subtle">
  175.                     <i class="bi bi-signpost-2"></i>
  176.                     Mes trajets
  177.                 </a>
  179.                 <a href="{{ path('app_mes_reservations') }}" class="list-group-item list-group-item-action bg-dark-subtle">
  180.                     <i class="bi bi-calendar-check"></i>
  181.                     Mes réservations
  182.                 </a>
  184.                 <a href="{{ path('app_mes_paiements') }}" class="list-group-item list-group-item-action bg-dark-subtle">
  185.                     <i class="bi bi-credit-card"></i>
  186.                     Mes paiements
  187.                 </a>
  189.                 <a href="{{ path('app_documents') }}" class="list-group-item list-group-item-action bg-dark-subtle">
  190.                     <i class="bi bi-file-earmark-text"></i>
  191.                     Mes documents
  192.                 </a>
  194.                 <a href="{{ path('app_parametres') }}" class="list-group-item list-group-item-action bg-dark-subtle">
  195.                     <i class="bi bi-gear"></i>
  196.                     Paramètres
  197.                 </a>
  199.                 <a href="{{ path('app_logout') }}" class="list-group-item list-group-item-action bg-dark-subtle">
  200.                     <i class="bi bi-box-arrow-right"></i>
  201.                     Déconnexion
  202.                 </a>
  204.                 <div class="list-group-item list-group-item-action bg-dark-subtle text-center d-block d-lg-none">
  206.                     <div class="d-flex justify-content-center gap-2 flex-wrap">
  207.                         <button class="installAppBtn px-1 btn btn-orange d-none" title="Installer HaloGari">
  208.                             <i class="bi bi-download"></i>
  209.                             Installer HaloGari
  210.                         </button>
  211.                         <button class="btnEnableNotifications btn btn-vert">
  212.                             <i class="bi bi-bell-fill"></i>
  213.                             Activer les notifications
  214.                         </button>
  215.                     </div>
  216.                 </div>
  218.             </div>
  219.         </div>
  220.     {% endif %}
  221. </div>
  223. <main class="flex-grow-1
  224.                                                                                                                         {% if app.request.attributes.get('_route') == 'app_home' %}
  225.                                                                                                                         pt-0
  226.                                                                                                                         {% else %}
  227.                                                                                                                         pt-5
  228.                                                                                                                         {% endif %}
  229.                                                                                                                           pt-md-5">