feat: Add language switcher

assets/js/languageSwitcher.js

@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const languageSwitcher = document.querySelector('.o-language-switcher');
+
+  if (!languageSwitcher) return;
+
+  const button = languageSwitcher.querySelector('.o-language-switcher__button');
+  const dropdown = languageSwitcher.querySelector('.o-language-switcher__dropdown');
+
+  button.addEventListener('click', function() {
+    const expanded = button.getAttribute('aria-expanded') === 'true';
+    button.setAttribute('aria-expanded', !expanded);
+    dropdown.setAttribute('aria-hidden', expanded);
+  });
+
+  document.addEventListener('click', function(event) {
+    if (!languageSwitcher.contains(event.target)) {
+      button.setAttribute('aria-expanded', 'false');
+      dropdown.setAttribute('aria-hidden', 'true');
+    }
+  });
+
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape' && button.getAttribute('aria-expanded') === 'true') {
+      button.setAttribute('aria-expanded', 'false');
+      dropdown.setAttribute('aria-hidden', 'true');
+    }
+  });
+});

assets/js/main.js

@@ -4,5 +4,6 @@ import './resizeObserver.js';
 import './mediaqueries.js';
 import './highlightHeadline.js';
 import './anchorlinks.js';
+import './languageSwitcher.js';
 import './darkmode.js';
 import './interactiveMap.js';

assets/sass/footer.scss

@@ -1,6 +1,9 @@
 .o-footer {
     margin-top: 2rem;
     margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
 }
 
 .o-footer__links {
@@ -26,8 +29,79 @@
     }
 }
 
-.o-footer__firstline {
+.o-footer__line {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.o-language-switcher {
+    position: relative;
+}
+
+.o-language-switcher__button {
+    border: 0;
+    background-color: var(--bg-neutral);
+    color: var(--color-body);
+    display: flex;
+    font-weight: 500;
+    padding: 1rem 1rem 1rem 0;
+}
+
+.o-language-switcher__current {
+    margin-right: 0.5rem;
+}
+
+.o-language-switcher__icon {
+    font-size: 0.7rem;
+    transition: transform 0.2s;
+}
+
+.o-language-switcher__button[aria-expanded="true"] .o-language-switcher__icon {
+    transform: rotate(180deg);
+
+    @media (max-width: #{$breakpoint-lg}) {
+        transform: rotate(0deg);
+    }
+}
+
+.o-language-switcher__dropdown {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    background: var(--bg-neutral);
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    list-style: none;
+    width: min-content;
+    margin-bottom: 0;
+    padding-left: 0;
+    box-shadow: var(--box-shadow);
+}
+
+.o-language-switcher__button[aria-expanded="true"] + .o-language-switcher__dropdown {
+    display: block;
+}
+
+.o-language-switcher__item {
+    margin: 1.6rem;
+}
+
+.o-language-switcher__link {
+    text-decoration: none;
+    font-weight: 400;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus {
+        color: var(--link-hovered);
+    }
+
+    &--active {
+        color: var(--link-default);
+        font-weight: 700;
+    }
 }

i18n/de.yaml

@@ -40,6 +40,9 @@ interactiveMap:
   title: Interaktive Länderkarte
   zoomIn: Hineinzoomen
   zoomOut: Herauszoomen
+language-switcher:
+  aria-label: Sprache wechseln
+  dropdown-label: Verfügbare Sprachen
 menu-close: Schließen
 menu-open: Menü
 navigate-to-country: Gehe zu Land

i18n/en.yaml

@@ -39,6 +39,9 @@ interactiveMap:
   title: Interactive Country Map
   zoomIn: Zoom In
   zoomOut: Zoom Out
+language-switcher:
+  aria-label: Switch language
+  dropdown-label: Available languages
 menu-close: Close
 menu-open: Menu
 navigate-to-country: Navigate to country

i18n/fr.yaml

@@ -36,6 +36,9 @@ interactiveMap:
   title: Carte interactive des pays
   zoomIn: Zoom avant
   zoomOut: Zoom arrière
+language-switcher:
+  aria-label: Changer de langue
+  dropdown-label: Langues disponibles
 menu-close: Fermer
 menu-open: Menu
 navigate-to-country: Aller au pays

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<div class="o-footer__firstline">
+<div class="o-footer__line">
   <div aria-label='{{ T "footer-love.aria-label"}}'>
     {{ T "footer-love.text"}}
   </div>
@@ -17,6 +17,35 @@
     {{ end }}
   </div>
 </div>
-<div>
-  {{ T "information-disclaimer-short"}}
+<div class="o-footer__line">
+  <div>{{ T "information-disclaimer-short"}}</div>
+    <div class="o-language-switcher" >
+      <button class="o-language-switcher__button"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              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" "keyboard_arrow_down" }}
+        </span>
+      </button>
+      <ul class="o-language-switcher__dropdown"
+          role="listbox"
+          id="language-dropdown"
+          aria-hidden="true"
+          aria-label="{{ T "language-switcher.dropdown-label" }}">
+        {{ range .AllTranslations }}
+          <li class="o-language-switcher__item" role="option"{{ if eq $.Site.Language .Language }} aria-selected="true"{{ end }}>
+            <a href="{{ .Permalink }}"
+               class="o-language-switcher__link{{ if eq $.Site.Language .Language }} o-language-switcher__link--active{{ end }}"
+               {{ if eq $.Site.Language .Language }}aria-current="page"{{ end }}
+            >
+              {{ .Language.LanguageName }}
+            </a>
+          </li>
+        {{ end }}
+      </ul>
+    </div>
 </div>

layouts/partials/menu.html

@@ -0,0 +1,60 @@
+
+{{ $logo := resources.Get "images/logo.svg" }}
+<div class="o-container o-header__wrapper">
+  <a id="skip-link" class="o-header__skip-link" href="#content">{{ T "skipToContent" }}</a>
+  <a href="{{ .Site.BaseURL | relLangURL }}" aria-label="{{ T "home-page-text" }}" class="o-header__logo">
+    <img aria-hidden="true" src="{{ $logo.RelPermalink }}" alt="">
+  </a>
+  <div class="o-header__curtain"></div>
+  <div class="o-header__nav o-container">
+    <li class="o-header__item a-theme-toggle--mobile">
+      {{ partial "theme-toggle" }}
+    </li>
+    <button class="o-nav__menu-button" title="Menü öffnen" aria-expanded="false" aria-haspopup="true">
+      <span>{{ T "menu-open" }}</span>
+      {{ partial "icon" "menu" }}
+    </button>
+    <nav>
+      <button class="o-nav__close-button" title="Menü schließen">
+        <span>{{ T "menu-close" }}</span>
+        {{ partial "icon" "close" }}
+      </button>
+      <menu>
+        <li class="o-header__item">
+          <button class="o-header__expand-button" aria-haspopup="true" aria-expanded="false">
+            <span>{{ T "countries.selection" }}</span>
+            {{ partial "icon" "keyboard_arrow_down" }}
+          </button>
+          <span id="menu-country-list-title">{{ T "country" }}</span>
+          <menu class="o-header__item-countries" aria-describedby="menu-country-list-title">
+            {{ range  where site.RegularPages "Section" "country"}}
+            <li class="o-header__item">
+              <a href="{{ .Permalink }}">{{ .Title }}</a>
+            </li>
+            {{ end }}
+          </menu>
+        </li>
+        <li class="o-header__item">
+          <span id="menu-general-list-title">{{ T "general" }}</span>
+          <ul aria-describedby="menu-general-list-title">
+            <li class="o-header__item a-theme-toggle--desktop">
+              {{ partial "theme-toggle" }}
+            </li>
+            {{ $news := site.GetPage "news" }}
+            {{ if $news }}
+            <li class="o-header__item">
+              <a href="{{ $news.RelPermalink }}">{{ $news.Title }}</a>
+            </li>
+            {{ end }}
+            {{ $informationPage := site.GetPage "generalInformation" }}
+            {{ if $informationPage }}
+            <li class="o-header__item">
+              <a href="{{ $informationPage.RelPermalink }}">{{ $informationPage.Title }}</a>
+            </li>
+            {{ end }}
+          </ul>
+        </li>
+      </menu>
+    </nav>
+  </div>
+</div>