feat: Show local language name in language switcher (#285)

Instead of the English language name, show the local language name of
the individual languages in the language switcher. Since users might not
understand or recognize the local language name, a translate icon has
been added.

Author: MoritzWeber0

assets/sass/footer.scss

@@ -48,10 +48,8 @@
     display: flex;
     font-weight: 500;
     padding: 1rem 1rem 1rem 0;
-}
-
-.o-language-switcher__current {
-    margin-right: 0.5rem;
+    gap: 0.5rem;
+    align-items: center;
 }
 
 .o-language-switcher__icon {
@@ -88,7 +86,7 @@
 }
 
 .o-language-switcher__item {
-    margin: 1.6rem;
+    margin: 1.6rem 3rem;
 }
 
 .o-language-switcher__link {

hugo.yaml

@@ -12,12 +12,12 @@ languages:
     weight: 1
     title: 'FIP Guide – Fast. Clear. Community-based.'
   de:
-    languageName: "German"
+    languageName: "Deutsch"
     languageCode: de
     weight: 2
     title: 'FIP Guide – Schnell. Übersichtlich. Community-basiert.'
   fr:
-    languageName: "French"
+    languageName: "Français"
     languageCode: fr
     weight: 3
     title: 'FIP Guide – Rapide. Clair. Basé sur le partage.'

layouts/partials/footer.html

@@ -26,10 +26,11 @@
               aria-controls="language-dropdown"
               title="{{ T "language-switcher.aria-label" }}"
               aria-label='{{ T "language-switcher.aria-label" }}'>
-        <span class="o-language-switcher__current">{{ $.Site.Language.LanguageName }}</span>
-        <span class="o-language-switcher__icon">
+        {{ partial "icon" "translate" }}
+        <div>{{ $.Site.Language.LanguageName }}</div>
+        <div class="o-language-switcher__icon">
           {{ partial "icon" "keyboard_arrow_down" }}
-        </span>
+        </div>
       </button>
       <ul class="o-language-switcher__dropdown"
           role="listbox"