Update language options after preferences are read

bilingual.css

@@ -10,6 +10,16 @@
   margin-right: .5rem;
   border: 1px solid gray;
   border-radius: 1px;
+  background: #ddd;
+}
+
+.wiai-language-chooser .wiai-language-option.active {
+  background-color: white;
+  font-weight: bold;
+}
+
+.sectionname {
+  padding-left: 50px;
 }
 
 .wiai-english {

bilingual.js

@@ -34,8 +34,9 @@ function init() {
 	categorizeElementsByPrefix();
 	initializeMultiLanguageElements();
   addLanguageChooser();
-  updateMultiLanguageElements();
   readUserPreferences();
+  updateMultiLanguageElements();
+  updateLanguageOptions();
 }
 
 /**
@@ -77,10 +78,7 @@ function addLanguageChooser() {
 		languageLink.addEventListener('click', function (event) {
       event.preventDefault();
       switchLanguage(currentLanguage, language);
-      languageChooserOptions.forEach(function (element) { 
-        element.classList.remove('active'); 
-      });    
-      languageLink.classList.add('active');
+      updateLanguageOptions();
     });
 
     if (language === currentLanguage) {
@@ -94,6 +92,19 @@ function addLanguageChooser() {
 	contentArea.prepend(languageChooser);
 }
 
+/**
+ * Marks the language option for the `currentLanguage` as `.active`.
+ */
+function updateLanguageOptions() {
+  languageChooserOptions.forEach(function (element) { 
+    if (element.getAttribute('data-wiai-language') === currentLanguage) {
+      element.classList.add('active');
+    } else {
+      element.classList.remove('active'); 
+    }
+  });
+}
+
 /**
  * Update the language class on the document body (`wiai-language-XYZ`) 
  * and update all elements in `multiLanguageElements`.
@@ -176,12 +187,10 @@ function readUserPreferences() {
   
   if (localStorageEntry != null) {
     currentLanguage = localStorage.getItem(STORAGE_LANGUAGE_PREFERENCE_KEY);
-    updateMultiLanguageElements();
     document.body.classList.add(`wiai-language-${currentLanguage}`);
   } else if (documentLanguage === 'en' || documentLanguage === 'en_us'
     || navigator.language === 'en' || navigator.language.includes('en-')) {
     currentLanguage = 'english';
-    updateMultiLanguageElements();
     document.body.classList.add(`wiai-language-${currentLanguage}`);
   }
 }