Style language chooser

bilingual.css

@@ -1,3 +1,17 @@
+.wiai-language-chooser {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wiai-language-chooser .wiai-language-option {
+  padding: .5rem 1rem;
+  margin-right: .5rem;
+  border: 1px solid gray;
+  border-radius: 1px;
+}
+
 .wiai-english {
 	display: none;
 }

bilingual.js

@@ -15,6 +15,9 @@ const languageElements = {};
 // separated by ' | '.
 const multiLanguageElements = [];
 
+// The links that allow to change the language.
+const languageChooserOptions = [];
+
 const LANGUAGES = ['german', 'english'];
 const LANGUAGE_NAMES = {'german': 'Deutsch', 'english': 'English'};
 const LANGUAGE_PREFIXES = {'img[alt="German"]': 'german', 'img[alt="English"]': 'english'};
@@ -74,12 +77,18 @@ function addLanguageChooser() {
 		languageLink.addEventListener('click', function (event) {
       event.preventDefault();
       switchLanguage(currentLanguage, language);
-      let siblings = Array.from(link.parentElement.children);
-      siblings.forEach(function (element) { element.classList.remove('active'); })
-      link.classList.add('active');
+      languageChooserOptions.forEach(function (element) { 
+        element.classList.remove('active'); 
+      });    
+      languageLink.classList.add('active');
     });
 
+    if (language === currentLanguage) {
+      languageLink.classList.add('active');
+    }
+
 		languageChooser.appendChild(languageLink);
+    languageChooserOptions.push(languageLink);
 	});
 
 	contentArea.prepend(languageChooser);
@@ -163,6 +172,7 @@ function readUserPreferences() {
   if (localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY) != null) {
     currentLanguage = localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY);
     updateMultiLanguageElements();
+    document.body.classList.add(`wiai-language-${currentLanguage}`);
   }
 }