feat: Proposal for language switcher using selector

Author: MoritzWeber0

assets/js/languageSwitcher.js

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

assets/js/main.js

@@ -37,71 +37,18 @@
     gap: 1rem;
 }
 
-.o-language-switcher {
-    position: relative;
-}
-
-.o-language-switcher__button {
-    border: 0;
+.o-language-switcher__select {
+    border: 1px solid var(--color-body);
     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;
+    padding: 1rem;
+    border-radius: var(--border-radius-m);
+    cursor: pointer;
+    font-size: 1.4rem;
 
     &:hover,
     &:focus {
-        color: var(--link-hovered);
-    }
-
-    &--active {
-        color: var(--link-default);
-        font-weight: 700;
+        border-color: var(--link-hovered);
     }
 }

assets/sass/footer.scss

@@ -19,21 +19,13 @@
 </div>
 <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" 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" aria-hidden="true">
+    <div class="o-language-switcher">
+      <select class="o-language-switcher__select" title='{{ T "language-switcher.aria-label" }}' aria-label='{{ T "language-switcher.aria-label" }}' onchange="window.location.href=this.value">
         {{ range .AllTranslations }}
-          <li class="o-language-switcher__item">
-            <a href="{{ .Permalink }}" class="o-language-switcher__link{{ if eq $.Site.Language .Language }} o-language-switcher__link--active{{ end }}">
-              {{ .Language.LanguageName }}
-            </a>
-          </li>
+          <option value="{{ .Permalink }}"{{ if eq $.Site.Language .Language }} selected{{ end }}>
+            {{ .Language.LanguageName }}
+          </option>
         {{ end }}
-      </ul>
+      </select>
     </div>
 </div>