Add locale selection menu

composer.json

@@ -47,6 +47,7 @@
         "symfonycasts/verify-email-bundle": "^1.17",
         "twbs/bootstrap":          "^5.3",
         "twig/extra-bundle":       "^3.0",
+        "twig/intl-extra":         "^3.9",
         "twig/string-extra":       "^3.10",
         "twig/twig":               "^3.0"
     },

config/packages/twig.yaml

@@ -2,6 +2,9 @@ twig:
     default_path: '%kernel.project_dir%/templates'
     form_themes: [ 'bootstrap_5_horizontal_layout.html.twig' ]
 
+    globals:
+        locale_all: '%locale.all%'
+
 when@test:
     twig:
         strict_variables: true

config/routes.yaml

@@ -7,4 +7,4 @@ controllers:
         path: ../src/Controller/
         namespace: App\Controller
     type: attribute
-    prefix: /{_locale<%locale.all%>}
+    prefix: /{_locale<%locale.all_string%>}

config/services.yaml

@@ -7,7 +7,8 @@ parameters:
     mailer.email: '%env(MAILER_EMAIL)%'
     mailer.name: '%env(MAILER_NAME)%'
 
-    locale.all: 'en|fr'
+    locale.all: [ 'en', 'fr' ]
+    locale.all_string: 'en|fr'
     locale.default: 'en'
 
 services:

src/Controller/CoreController.php

@@ -20,7 +20,7 @@ class CoreController extends AbstractController {
      */
     public function root_redirect (Request $request): Response {
         return $this->redirectToRoute('core_main', [
-            '_locale' => $request->getPreferredLanguage(explode('|', $this->getParameter('locale.all'))),
+            '_locale' => $request->getPreferredLanguage($this->getParameter('locale.all')),
         ]);
     }
 

templates/base.html.twig

@@ -1,10 +1,9 @@
 {% extends "/symfony.html.twig" %}
 
 {% block headerTag %}
-<header class="pb-2">
+<header class="pb-2 d-flex flex-column justify-content-start fixed-top">
 {% endblock %}
 {% block headerContent %}
-    <nav class="navbar-light d-flex flex-column justify-content-start fixed-top">
     <div class="d-flex justify-content-between w-100 px-2">
         <!--region Website name-->
         <a class="navbar-brand" href="{{ path('core_main') }}">
@@ -12,11 +11,24 @@
         </a>
         <!--endregion-->
         <!--region menu-->
-            <div class="d-flex align-items-center">
+        <nav class="navbar navbar-expand-lg py-0">
-                <a href="{{ path('user_signIn') }}" class="me-3">Sign In</a>
+            <ul class="navbar-nav">
-                <a href="{{ path('user_signUp') }}" class="me-3">Sign Up</a>
+                <li class="nav-item"><a href="{{ path('user_signIn') }}" class="nav-link py-0">Sign In</a></li>
-            </div>
+                <li class="nav-item"><a href="{{ path('user_signUp') }}" class="nav-link py-0">Sign Up</a></li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle py-0" id="dropdown-locale" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        {{ app.request.locale|locale_name(app.request.locale)|u.title }}
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="dropdown-locale">
+                        {% for locale in locale_all %}
+                            <li>
+                                <a class="dropdown-item" href="{{ path(app.current_route, {'_locale': locale}) }}">{{ locale|locale_name(app.request.locale)|u.title }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </li>
+            </ul>
+        </nav>
         <!--endregion-->
     </div>
-    </nav>
 {% endblock %}