diff --git a/assets/js/languageSwitcher.js b/assets/js/languageSwitcher.js
new file mode 100644
index 00000000..9e36509b
--- /dev/null
+++ b/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');
+ }
+ });
+});
diff --git a/assets/js/main.js b/assets/js/main.js
index 8a149dc3..1344bdca 100644
--- a/assets/js/main.js
+++ b/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';
diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss
index 2b232458..564f9c00 100644
--- a/assets/sass/footer.scss
+++ b/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;
+ }
}
diff --git a/i18n/de.yaml b/i18n/de.yaml
index 06ae0d52..7f43a8f6 100644
--- a/i18n/de.yaml
+++ b/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
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 8af8d035..25e0a113 100644
--- a/i18n/en.yaml
+++ b/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
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
index 8a10395d..001a607c 100644
--- a/i18n/fr.yaml
+++ b/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
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 880d024a..f34eaccb 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-
-
- {{ T "information-disclaimer-short"}}
+
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
new file mode 100644
index 00000000..130c0e54
--- /dev/null
+++ b/layouts/partials/menu.html
@@ -0,0 +1,60 @@
+
+{{ $logo := resources.Get "images/logo.svg" }}
+