Locale selection: add flag

assets/styles/_freakFlagSprite.scss

@@ -0,0 +1,48 @@
+/*!*****************************************************
+Freak Flags, Copyright ©2024 Michael P. Cohen. Freak flags is licenced under the MIT licence.
+For complete information visit: www.freakflagsprite.com
+******************************************************/
+
+:not(img).fflag {
+    background-image  : url('../images/freakFlagSprite.png');
+    background-repeat : no-repeat;
+    background-size   : 100% 49494%;
+    display           : inline-block;
+    overflow          : hidden;
+    position          : relative;
+    vertical-align    : middle;
+    box-sizing        : content-box;
+}
+:not(img).fflag-FR {
+    background-position : center 0.2287%
+}
+:not(img).fflag-GB, :not(img).fflag-EN {
+    background-position : center 0.4524%
+}
+
+img.fflag {
+    object-fit : cover;
+}
+img.fflag-FR {
+    object-position : center 0.2287%
+}
+img.fflag-GB, img.fflag-EN {
+    object-position : center 0.4524%
+}
+
+.fflag.ff-sm {
+    width  : 18px;
+    height : 11px
+}
+.fflag.ff-md {
+    width  : 27px;
+    height : 17px
+}
+.fflag.ff-lg {
+    width  : 42px;
+    height : 27px
+}
+.fflag.ff-xl {
+    width  : 60px;
+    height : 37px
+}

assets/styles/app.scss

@@ -1,3 +1,4 @@
 @import 'bootstrap';
 @import 'xdebug';
 @import 'layout';
+@import 'freakFlagSprite';

templates/base.html.twig

@@ -15,14 +15,24 @@
             <ul class="navbar-nav">
                 <li class="nav-item"><a href="{{ path('user_signIn') }}" class="nav-link py-0">Sign In</a></li>
                 <li class="nav-item"><a href="{{ path('user_signUp') }}" class="nav-link py-0">Sign Up</a></li>
-                <li class="nav-item dropdown">
+                <li class="nav-item dropdown dropstart">
                     <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 }}
+                        <img src="{{ asset('images/freakFlagSprite.png') }}"
+                             class="fflag fflag-{{ app.request.locale|u.upper }} ff-md"
+                             alt="{{ app.request.locale|locale_name(app.request.locale)|u.title }}"
+                             title="{{ 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>
+                                <a class="dropdown-item" href="{{ path(app.current_route, {'_locale': locale}) }}">
+                                    <img src="{{ asset('images/freakFlagSprite.png') }}"
+                                         class="fflag fflag-{{ locale|u.upper }} ff-md"
+                                         alt="{{ locale|locale_name(locale)|u.title }}"
+                                    >
+                                    {{ locale|locale_name(locale)|u.title }}
+                                </a>
                             </li>
                         {% endfor %}
                     </ul>