templates/header.html.twig line 1

  1. <!-- Navbar -->
  2. {% if app.user != null %}
  3.     <nav class="navbar navbar-expand-lg bg-secondary shadow-lg sticky">
  4.         <!-- Container wrapper -->
  5.         <div class="container-md flex-nowrap align-items-center">
  6.             <div class="dropdown show hide-sm ">
  7.                 <button class="navbar-toggler " role="button" id="dropdownMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  8.                     <span class="material-symbols-outlined">
  9.                         menu
  10.                     </span>
  11.                 </button>
  12.                 <div class="dropdown-menu" aria-labelledby="dropdownMenu">
  13.                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  14.                         <a href="/" class="ms-3 text-decoration-none text-white">{{ 'Home'|trans }}</a>
  15.                         {% if is_granted('ROLE_PROGRAM_MANAGER') or is_granted('ROLE_SUPER_ADMIN') %}
  16.                             <a href="{{ path('app_bot_index') }}" class="ms-3 text-decoration-none text-white">{{ 'Bots'|trans }}</a>
  17.                         {% endif %}
  18.                     </ul>
  19.                 </div>
  20.             </div>
  21.             <a href="/" class="d-flex navbar-brand">
  22.                 <img src="{{ asset('images/logo.webp')}}" style="height: 48px; margin-left: 30px;" class="d-none d-sm-block"/>
  23.                 <img src="{{ asset('images/logo-2.png')}}" style="height: 48px; margin-left: 40px;" class="d-none d-sm-block"/>
  24.                 <img src="{{ asset('images/logo.webp')}}" style="height: 30px; margin-left: 10px" class="d-block d-sm-none"/>
  25.                 <img src="{{ asset('images/logo-2.png')}}" style="height: 30px; margin-left: 10px" class="d-block d-sm-none"/>
  26.             </a>
  27.             <nav class="navbar navbar-expand-lg hide-lg">
  28.                 <div class="collapse navbar-collapse" id="navbarToggler">
  29.                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  30.                         <a href="/" class="ms-3 text-decoration-none text-white bold">{{ 'Home'|trans }}</a>
  31.                         {% if is_granted('ROLE_PROGRAM_MANAGER') or is_granted('ROLE_SUPER_ADMIN') %}
  32.                             <a href="{{ path('app_bot_index') }}" class="ms-3 text-decoration-none text-white bold">{{ 'Bots'|trans }}</a>
  33.                         {% endif %}
  34.                     </ul>
  35.                 </div>
  36.             </nav>
  37.             <!-- Right elements -->
  39.             <!-- Avatar -->
  40.       {# {% if app.user %} #}
  41.         <div class="dropdown show align-items-center">
  42.           <a class="btn" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  43.             <span class="hide-lg" style="text-transform: capitalize; vertical-align: middle;padding-right: 10px;">
  44.               {{app.user.firstName}}
  45.               {{app.user.lastName}}
  46.             </span>
  47.             {% if app.user.image %}
  48.               <img src={{app.user.image}} class="rounded-circle" style="height: 40px; width: 40px;" loading="lazy"/>
  49.             {% endif %}
  50.             {% if is_granted('ROLE_PROGRAM_MANAGER') or is_granted('ROLE_SUPER_ADMIN') %}
  51.               <span class="token badge text-bg-cyellow ms-2">{{ app.user.programManager.getTokensPool()|round }}
  52.                 <i class="fal fa-coin"></i>
  53.               </span>
  54.             {% endif %}
  56.           </a>
  57.           <div class="dropdown-menu profileMenu" aria-labelledby="dropdownMenuLink">
  58.             <a href="{{ path('app_user_profile') }}?origin={{ app.request.attributes.get('_route') }}&origin_params={{ app.request.attributes.get('_route_params') | json_encode }}" class="dropdown-item text-white ">
  59.               {{ 'profile'|trans }}
  60.             </a>
  61.             <a class="dropdown-item text-white " href="/contact">{{ 'Aide'|trans }}</a>
  62.             <a class="dropdown-item text-white " href="/logout">{{ 'Logout'|trans }}</a>
  63.           </div>
  64.         </div>
  65.       {# {% endif %} #}
  67.             <!-- Language -->
  68.             <div class="switch">
  69.                 <select id="language-toggle">
  70.                     <option value="fr" {% if app.request.locale == "fr" %} selected {% endif %}>FR</option>
  71.                     <option value="en" {% if app.request.locale != "fr" %} selected {% endif %}>EN</option>
  72.                 </select>
  73.             </div>
  74.         </div>
  75.     </nav>
  76. {% endif %}
  77. <style>
  78.     .bold:hover {
  79.         opacity: .8;
  80.     }
  81.     .bg-nav {
  82.         font-family: 'Roboto', sans-serif;
  83.     }
  85.     .navbar-toggler {
  86.         background-color: #d3d3d39e;
  87.     }
  89.     .switch {
  90.         background-color: #d3d3d39e;
  91.         border-radius: 6px;
  92.         padding: 3px 4px;
  93.         cursor: pointer;
  94.         font-size: 70%;
  95.         font-weight: bold;
  96.         margin-bottom: 4px;
  97.     }
  99.     .bold {
  100.         font-weight: bold;
  101.     }
  102.     .material-symbols-outlined {
  103.         font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  104.         color: #fff;
  105.     }
  106.     @media(min-width: 992px) {
  107.         .hide-sm {
  108.             display: none;
  109.         }
  110.     }
  111.     @media(max-width: 992px) {
  112.         .navbar-brand {
  113.             margin-right: 0;
  114.         }
  115.         .hide-lg {
  116.             display: none;
  117.         }
  118.         .dropdown-menu.show {
  119.             left: 0
  120.         }
  121.         .profileMenu {
  122.             left: -50px !important;
  123.         }
  125.     }
  126.     .sticky {
  127.         position: sticky;
  128.         top: 0;
  129.         width: 100%;
  130.         z-index: 1;
  131.     }
  132. </style>
  133. <script>
  134.     $(document).ready(function () {
  135.     var languageToggle = document.getElementById('language-toggle');
  136.     if (!languageToggle) return;
  138.     languageToggle.checked = {{ app.request.locale != "fr" ? "true" : "false" }};
  140.     languageToggle.onchange = function () {
  141.       var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this);
  142.       var value = elem.value || elem.options[elem.selectedIndex].value;
  143.       changeLanguage(value);
  144.     }
  145.   });
  147.   function changeLanguage(lang) {
  148.     fetch('/profile/lang', {
  149.       method: 'POST',
  150.       headers: {
  151.         'Content-Type': 'application/json'
  152.       },
  153.       body: JSON.stringify(
  154.         {lang: lang}
  155.       )
  156.     })
  157.       .then(response => response.json())
  158.       .then(data => console.log(data))
  159.       .catch(error => console.error('Erreur:', error))
  160.       .finally(() => {
  161.         const url = new URL(window.location.href);
  162.         url.searchParams.set('lang', lang);
  163.         window.location.href = url.href;
  164.       });
  165.   }
  166. </script>