templates/components/locale_switcher.html.twig line 1

Open in your IDE?
  1. {# Composant de sélection de langue #}
  2. <div class="locale-switcher">
  3.     <div class="dropdown">
  4.         <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="localeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
  5.             <span class="locale-icon">🌐</span>
  6.             {% if app.request.locale == 'fr' %}
  7.                 🇫🇷 Français
  8.             {% else %}
  9.                 🇬🇧 English
  10.             {% endif %}
  11.         </button>
  12.         <ul class="dropdown-menu" aria-labelledby="localeDropdown">
  13.             <li>
  14.                 <a class="dropdown-item {% if app.request.locale == 'fr' %}active{% endif %}" href="{{ path('app_locale_switch', {'locale': 'fr'}) }}">
  15.                     🇫🇷 Français
  16.                 </a>
  17.             </li>
  18.             <li>
  19.                 <a class="dropdown-item {% if app.request.locale == 'en' %}active{% endif %}" href="{{ path('app_locale_switch', {'locale': 'en'}) }}">
  20.                     🇬🇧 English
  21.                 </a>
  22.             </li>
  23.             <li><hr class="dropdown-divider"></li>
  24.             <li>
  25.                 <a class="dropdown-item" href="{{ path('app_locale_reset') }}">
  26.                     🌐 {{ 'locale.auto_detect'|trans }}
  27.                 </a>
  28.             </li>
  29.         </ul>
  30.     </div>
  31. </div>
  33. <style>
  34. .locale-switcher .dropdown-toggle {
  35.     min-width: 140px;
  36.     text-align: left;
  37. }
  39. .locale-switcher .locale-icon {
  40.     margin-right: 8px;
  41.     font-size: 16px;
  42. }
  44. .locale-switcher .dropdown-item.active {
  45.     background-color: var(--bs-primary);
  46.     color: white;
  47. }
  49. .locale-switcher .dropdown-item:hover {
  50.     background-color: var(--bs-primary-bg-subtle);
  51. }
  53. /* Styles pour le sélecteur de langue mobile */
  54. .mobile-locale-switcher {
  55.     display: flex;
  56.     gap: 8px;
  57.     justify-content: center;
  58.     flex-wrap: wrap;
  59. }
  61. .mobile-locale-switcher .btn {
  62.     min-width: 100px;
  63.     font-size: 14px;
  64.     padding: 6px 12px;
  65. }
  67. .mobile-locale-switcher .btn.active {
  68.     background-color: var(--bs-primary);
  69.     color: white;
  70.     border-color: var(--bs-primary);
  71. }
  73. .mobile-locale-switcher .btn:hover {
  74.     background-color: var(--bs-primary-bg-subtle);
  75.     border-color: var(--bs-primary);
  76. }
  78. /* Responsive : sur très petits écrans */
  79. @media (max-width: 480px) {
  80.     .mobile-locale-switcher {
  81.         flex-direction: column;
  82.         gap: 4px;
  83.     }
  84.     
  85.     .mobile-locale-switcher .btn {
  86.         width: 100%;
  87.         min-width: auto;
  88.     }
  89. }
  90. </style>