templates/common/mobile-navi.html.twig line 1

Open in your IDE?
  1. {% if app.user %}
  2.   {% if current_route == 'suggestion.index' %}
  3.     {# Header spécifique pour la page des suggestions mobile : bouton burger + icône d'avertissement #}
  4.     <div style="position: fixed; top: 15px; right: 5px; z-index: 1050;">
  5.       <div class="d-flex align-items-center gap-2">
  6.         {# Icône d'avertissement si alerte LinkedIn nécessaire #}
  7.         {% if showMobileReconnectAlert is defined and showMobileReconnectAlert %}
  8.           <span class="fa-stack fs-20" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="click" data-bs-content="Afin que les messages soient envoyés, veuillez vous connecter depuis votre ordinateur. Vous avez reçu un lien de connexion par e-mail." data-bs-original-title="<i class='fa-brands fa-linkedin me-2'></i>Connexion requise depuis votre ordinateur" data-bs-html="true" data-bs-custom-class="alert-popover">
  9.             <i class="fa-solid fa-circle fa-stack-2x" style="color: #ffc107;"></i>
  10.             <i class="fa-solid fa-triangle-exclamation fa-stack-1x fa-inverse"></i>
  11.           </span>
  12.         {% endif %}
  13.         {# Bouton burger #}
  14.         <a class="" data-bs-toggle="offcanvas" href="#mobileNavi" role="button" aria-controls="mobileNavi">
  15.           <span class="fa-stack fs-20">
  16.             <i class="fa-solid fa-circle fa-stack-2x" style="color: #0B3A3C;"></i>
  17.             <i class="fa-solid fa-bars fa-stack-1x fa-inverse"></i>
  18.           </span>
  19.         </a>
  20.       </div>
  21.     </div>
  22.   {% else %}
  23.     {# Header standard pour toutes les autres pages #}
  24.     <div class="fixed-top bg-white">
  25.       <div class="d-flex align-items-center">
  26.         <div class="p-2">
  27.           <img src="{{ app.user.photo }}" class="border rounded-circle" style="width: 50px; height: 50px;"></div>
  28.           <div class="p-2 flex-fill">
  29.             Bienvenue sur bambboo
  30.             {% if app.user.firstname is not empty %}
  31.               <span class="ubuntu-bold d-block">
  32.                 {{ app.user.firstname ~ ' ' ~ app.user.lastname|slice(0, 1)|upper }}
  33.                 .
  34.               </span>
  35.             {% endif %}
  36.           </div>
  37.           <div class="p-2">
  38.             <a class="" data-bs-toggle="offcanvas" href="#mobileNavi" role="button" aria-controls="mobileNavi">
  39.               <span class="fa-stack fs-20">
  40.                 <i class="fa-solid fa-circle fa-stack-2x" style="color: #0B3A3C;"></i>
  41.                 <i class="fa-solid fa-bars fa-stack-1x fa-inverse"></i>
  42.               </span>
  43.             </a>
  44.           </div>
  45.         </div>
  46.       </div>
  47.     {% endif %}
  48.   {% endif %}
  49.   {% if app.user %}
  50.     <div class="offcanvas offcanvas-end" tabindex="-1" id="mobileNavi" aria-labelledby="offcanvasExampleLabel">
  51.       <div class="offcanvas-header">
  52.         <a class="btn-close me-3" data-bs-dismiss="offcanvas" aria-label="Close">
  53.           <span class="fa-stack fs-20">
  54.             <i class="fa-solid fa-circle fa-stack-2x" style="color: #0B3A3C;"></i>
  55.             <i class="fa-solid fa-times fa-stack-1x fa-inverse"></i>
  56.           </a>
  57.         </button>
  58.       </div>
  59.       <div class="offcanvas-body d-flex flex-column p-0">
  60.         <div class="px-2 flex-grow-1 overflow-auto">
  61.           <!-- Alerte de reconnexion LinkedIn si nécessaire -->
  62.           {% if showMobileReconnectAlert is defined and showMobileReconnectAlert %}
  63.             <div class="alert alert-warning d-flex align-items-center fs-12 mb-3" role="alert">
  64.               <div>
  65.                 <strong class="fs-13">
  66.                   <i class="fa-brands fa-linkedin me-2 fs-14"></i>
  67.                   Connexion requise depuis votre ordinateur
  68.                 </strong>
  69.                 <br/>
  70.                 <span class="fs-12">
  71.                   Afin que les messages soient envoyés, veuillez vous connecter depuis votre ordinateur. Vous avez reçu un lien de connexion par e-mail.
  72.                 </span>
  73.               </div>
  74.             </div>
  75.           {% endif %}
  77.           {% if is_granted('ROLE_RECRUITER') %}
  78.             <span class="text-uppercase ubuntu-bold fs-16 ps-3">
  79.               Espace recruteur
  80.             </span>
  81.             <div class="list-group list-group-flush border-0 mt-3 mb-5 fs16">
  82.               <a href="{{ path('user.dashboard') }}" class="list-group-item list-group-item-action border-0 d-flex align-items-center {% if current_route == 'user.dashboard' %} active {% endif %}">
  83.                 <i class="fa-solid fa-chart-simple text-darkgreen me-2" style="width: 1.25rem; text-align: center;"></i>
  84.                 <span>
  85.                   Statistiques
  86.                 </span>
  87.               </a>
  88.               <a href="{{ path('application.index') }}" class="list-group-item list-group-item-action border-0 d-flex align-items-center {% if current_route == 'application.index' %} active {% endif %}">
  89.                 <i class="fa-regular fa-ballot-check text-darkgreen me-2" style="width: 1.25rem; text-align: center;"></i>
  90.                 <span>
  91.                   Candidats
  92.                 </span>
  93.               </a>
  94.             </div>
  95.           {% endif %}
  96.           <span class="text-uppercase ubuntu-bold fs-16 ps-3">
  97.             Espace coopteur
  98.           </span>
  99.           <div class="list-group list-group-flush border-0 mt-3 fs16">
  100.             <a href="{{ path('user.dashboard-cooptor') }}" class="list-group-item list-group-item-action border-0 d-flex align-items-center">
  101.               <i class="fa-solid fa-house text-darkgreen me-2" style="width: 1.25rem; text-align: center;"></i>
  102.               <span>
  103.                 Tableau de bord
  104.               </span>
  105.             </a>
  106.             <a href="{{ path('suggestion.index') }}" class="list-group-item list-group-item-action border-0 d-flex align-items-center">
  107.               <i class="fa-sharp fa-solid fa-wand-magic-sparkles text-darkgreen me-2" style="width: 1.25rem; text-align: center;"></i>
  108.               <span>
  109.                 Profils détectés
  110.               </span>
  111.             </a>
  112.             {% if app.user and app.user.identityUid %}
  113.               <a href="{{ path('application.mine') }}" class="list-group-item list-group-item-action border-0 d-flex align-items-center">
  114.                 <i class="fa-solid fa-user text-darkgreen me-2" style="width: 1.25rem; text-align: center;"></i>
  115.                 <span>
  116.                   Mes recommandations
  117.                 </span>
  118.               </a>
  119.               <a href="{{ path('application.my-recruitments') }}" class="list-group-item list-group-item-action border-0 d-flex align-items-center">
  120.                 <i class="fa-solid fa-handshake-simple text-darkgreen me-2" style="width: 1.25rem; text-align: center;"></i>
  121.                 <span>
  122.                   Mes recrutements
  123.                 </span>
  124.               </a>
  125.             {% endif %}
  126.           </div>
  127.           <div class="px-3 flex-shrink-0 mt-auto border-top bg-white py-2">
  128.             <ul class="list-unstyled mb-0">
  129.               <li class="p-2 fs-16">
  130.                 <a href="javascript:void(0)" class="text-decoration-none text-dark d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#modal-support" data-bs-dismiss="offcanvas" data-support-source="mobile_navi" aria-label="Ouvrir la modal Contacter le support" role="button">
  131.                   <i class="fa-regular fa-circle-question me-2" style="width: 1.25rem; text-align: center;"></i>
  132.                   <span>
  133.                     Aide & Support
  134.                   </span>
  135.                 </a>
  136.               </li>
  137.               <li class="p-2 fs-16">
  138.                 <a href="/logout" class="text-decoration-none text-dark d-flex align-items-center">
  139.                   <i class="fa-sharp fa-solid fa-arrow-right-from-bracket text-brickhouse me-2" style="width: 1.25rem; text-align: center;"></i>
  140.                   <span>
  141.                     Se déconnecter
  142.                   </span>
  143.                 </a>
  144.               </li>
  145.             </ul>
  146.           </div>
  147.         </div>
  148.       </div>
  149.     </div>
  150.   {% endif %}
  152.   {# Styles pour la popover d'alerte personnalisée #}
  153.   <style>
  154.     .alert-popover {
  155.       --bs-popover-max-width: calc(100vw - 30px);
  156.       --bs-popover-border-color: #ffeaa7;
  157.       --bs-popover-header-bg: #fff3cd;
  158.       --bs-popover-header-color: #856404;
  159.       --bs-popover-body-bg: #fff3cd;
  160.       --bs-popover-body-color: #856404;
  161.       --bs-popover-body-padding-x: 1rem;
  162.       --bs-popover-body-padding-y: 0.75rem;
  163.       --bs-popover-arrow-color: #fff3cd;
  164.       --bs-popover-arrow-outer-color: #ffeaa7;
  165.     }
  166.   </style>
  168.   {# Script pour initialiser les popovers #}
  169.   <script>
  170.     document.addEventListener('DOMContentLoaded', function() {
  171.       // Initialiser tous les popovers
  172.       var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
  173.       var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  174.         return new bootstrap.Popover(popoverTriggerEl);
  175.       });
  176.     });
  177.   </script>
  178.