Display the current language in the selector of the homepage

Author: javiereguiluz

assets/styles/app.scss

@@ -398,9 +398,22 @@ body#homepage .page-header h1 {
   margin: 0;
 }
 body#homepage .page-header a.language-selector-dropdown-button {
+  align-items: center;
+  border: 2px solid var(--gray-300);
+  border-radius: 4px;
   color: inherit;
-  font-size: 21px;
+  display: inline-flex;
+  font-size: 16px;
   line-height: 1;
+  padding: 5px 15px;
+}
+body#homepage .page-header a.language-selector-dropdown-button:hover {
+  background: var(--gray-100);
+  border-color: var(--gray-800);
+}
+body#homepage .page-header a.language-selector-dropdown-button .current-language {
+  display: inline-flex;
+  margin-inline: 5px 10px;
 }
 body#homepage .jumbotron {
   display: flex;

templates/default/_language_selector.html.twig

@@ -1,6 +1,9 @@
-{% macro render_language_selector() %}
+{% macro render_language_selector(display_current_language = false) %}
     <a href="#" class="nav-link dropdown-toggle language-selector-dropdown-button" data-toggle="modal" data-target="#locale-selector-modal" role="button" id="locales">
         <i class="fa fa-solid fa-globe" aria-hidden="true"></i>
+        {% if display_current_language %}
+            <span class="current-language">{{ app.request.locale|locale_name }}</span>
+        {% endif %}
         <span class="caret"></span>
         <span class="sr-only">{{ 'menu.choose_language'|trans }}</span>
     </a>

templates/default/homepage.html.twig

@@ -14,7 +14,7 @@
         <h1>{{ 'title.homepage'|trans|raw }}</h1>
 
         {% from 'default/_language_selector.html.twig' import render_language_selector %}
-        {{ render_language_selector() }}
+        {{ render_language_selector(true) }}
     </div>
 
     <div class="row">