Added language changer

SamElfring · Oct 13, 2023 · 9884617 · 9884617
1 parent 8ab815e
commit 9884617
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -8,16 +8,28 @@
             <h2 class="text-lg font-bold">Sam Elfring</h2>
         </div>
 
-        <ul class="hidden md:flex gap-4">
-            <li v-for="link in navLinks">
-                <a
-                    :href="link.link"
-                    class="text-slate-400 hover:underline hover:text-white"
-                >
-                    {{ $t(link.name) }}
-                </a>
-            </li>
-        </ul>
+        <div class="flex items-center gap-4">
+            <select
+                name="language"
+                class="rounded p-2 bg-slate-700 border-slate-600 placeholder-slate-400 text-white focus:ring-blue-500 focus:border-blue-500"
+                @change="$i18n.locale = $event.target.value"
+            >
+                <option value="nl" :selected="$i18n.locale == 'nl'">Nederlands</option>
+                <option value="en" :selected="$i18n.locale == 'en'">English</option>
+                <option value="de" :selected="$i18n.locale == 'de'">Deutsch</option>
+            </select>
+
+            <ul class="hidden md:flex gap-4">
+                <li v-for="link in navLinks">
+                    <a
+                        :href="link.link"
+                        class="text-slate-400 hover:underline hover:text-white"
+                    >
+                        {{ $t(link.name) }}
+                    </a>
+                </li>
+            </ul>
+        </div>
     </nav>
 </template>
 
@@ -40,8 +52,10 @@ onMounted(() => {
         if (window.innerWidth > 768 /* Medium screen breakpoint */) {
             const headerClasses = ["bg-slate-800", "py-2"];
 
-            if (window.scrollY > 0) header.value.classList.add(...headerClasses);
-            else header.value.classList.remove(...headerClasses);
+            if (header.value?.classList) {
+                if (window.scrollY > 0) header.value.classList.add(...headerClasses);
+                else header.value.classList.remove(...headerClasses);
+            }
         }
     });
 });