✨ feat(i18n): display lcode in language switcher (#565)

themes/tabi/sass/parts/_header.scss

@@ -126,6 +126,28 @@ header {
     }
 }
 
+    .language-switcher-icon-with-code {
+        margin-inline-end: 0.3rem;
+        width: 0.7rem;
+        height: 0.7rem;
+    }
+}
+
+.language-switcher-icon-code {
+    position: absolute;
+    top: -0.15rem;
+    z-index: 10;
+    inset-inline-start: 0.7rem;
+    width: 100%;
+    height: 100%;
+    color: var(--text-color);
+    font-size: 0.5rem;
+    text-transform: uppercase;
+
+    &:hover {
+        color: var(--meta-color);
+    }
+
 .dropdown {
     display: inline-block;
     position: relative;

themes/tabi/templates/partials/language_switcher.html

@@ -1,7 +1,12 @@
 <li class="language-switcher">
     <details class="dropdown">
         <summary role="button" aria-haspopup="true" title="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}" aria-label="{{ macros_translate::translate(key="language_selection", default="Language selection", language_strings=language_strings) }}">
+            {%- if config.extra.show_selected_language_code_in_language_switcher -%}
+            <div class="language-switcher-icon language-switcher-icon-with-code"></div>
+            <div class="language-switcher-icon-code">{{lang}}</div>
+            {%- else -%}
             <div class="language-switcher-icon"></div>
+            {%- endif -%}
         </summary>
         <div class="dropdown-content" role="menu">
             {#- Display the current language first in the dropdown -#}

themes/tabi/theme.toml

@@ -56,6 +56,9 @@ skin = ""
 # browser_theme_color = "#087e96"  # Example of single value.
 # browser_theme_color = ["#ffffff", "#000000"]  # Example of light/dark colours.
 
+# Show current language code on the language switcher
+show_selected_language_code_in_language_switcher = false
+
 # List additional stylesheets to load site-wide.
 # These stylesheets should be located in your site's `static` directory.
 # Example: stylesheets = ["extra1.css", "path/extra2.css"]