Add locale handling

src/components/LanguageSelector/LanguageSelector.vue

@@ -0,0 +1,37 @@
+<template>
+    <button id="button-dropdown-locales" data-dropdown-toggle="dropdown-locales" type="button"
+            class="rounded-full p-1 hover:bg-slate-200 dark:hover:bg-slate-700">
+        <div class="w-5 h-5 flex items-center justify-center">
+            <div class="dark:invert">
+                <svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+                    width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 466.337 466.337">
+                    <g><path d="M233.168,0C104.604,0,0,104.604,0,233.168c0,128.565,104.604,233.169,233.168,233.169 c128.565,0,233.169-104.604,233.169-233.169C466.337,104.604,361.733,0,233.168,0z M223.984,441.874 c-22.321,0-46.405-41.384-59.045-107.815h118.067C270.371,400.49,246.316,441.874,223.984,441.874z M161.114,310.144 c-2.738-19.991-4.437-41.781-4.881-65.018H291.74c-0.443,23.237-2.148,45.027-4.869,65.018H161.114z M24.521,245.126h107.704 c0.443,21.883,2.09,43.859,4.887,65.018H38.768C30.693,289.826,25.818,267.966,24.521,245.126z M223.984,24.464 c21.982,0,45.687,40.14,58.484,104.877h-116.97C178.286,64.604,201.996,24.464,223.984,24.464z M286.463,153.245 c2.978,20.785,4.811,43.596,5.277,67.966H156.222c0.467-24.37,2.295-47.169,5.272-67.966H286.463z M132.226,221.211H24.521 c1.354-23.926,6.568-46.836,15.332-67.966h97.656C134.462,175.32,132.681,198.312,132.226,221.211z M315.749,245.126h126.065 c-1.296,22.84-6.188,44.7-14.246,65.018H310.855C313.646,288.985,315.305,267.009,315.749,245.126z M315.749,221.211 c-0.468-22.898-2.254-45.891-5.29-67.966h116.023c8.77,21.13,13.978,44.04,15.332,67.966H315.749z M414.596,129.33H306.617 c-7.894-42.067-20.727-78.844-38.195-102.222C330.952,37.799,384.06,76.205,414.596,129.33z M176.073,32.036 c-15.7,23.459-27.348,58.1-34.699,97.305H51.741C78.657,82.505,123.064,47.1,176.073,32.036z M49.96,334.058h90.895 c7.311,40.403,19.133,76.205,35.219,100.26C121.944,418.904,76.672,382.378,49.96,334.058z M268.41,439.222 c17.865-23.938,30.874-61.889,38.697-105.164h109.274C386.15,388.743,332.12,428.339,268.41,439.222z"/></g>
+                </svg>
+            </div>
+        </div>
+    </button>
+
+    <div id="dropdown-locales" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
+        <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="button-dropdown-locales">
+            
+            <li v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`">
+                <input :id="`radio-locale-${locale}`" type="radio" :value="locale" name="locale" class="hidden" v-model="$i18n.locale" :onChange="changeLocale">
+                <label :for="`radio-locale-${locale}`" class="text-sm font-medium uppercase text-gray-900 rounded dark:text-gray-300 ">
+                    <div class="flex items-center p-2 px-5 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+                        {{ locale }}
+                    </div>
+                </label>
+            </li>
+
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { Dropdown } from "flowbite";
+    import { setLocale } from "@/utilities/locale_handler";
+
+    function changeLocale(e:any) {
+        setLocale(e.target.value);
+    }
+</script>

src/components/Navbar/Navbar.vue

@@ -6,6 +6,7 @@
         <div class="block md:flex">
             <div class="flex justify-end items-center order-2">
                 <ThemeSwitch />
+                <LanguageSelector />
 
                 <button class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 md:hidden dark:text-gray-400"
                     data-collapse-toggle="navbar-main" type="button" aria-controls="navbar-main" aria-expanded="false">
@@ -32,5 +33,6 @@
 <script setup lang="ts">
     import NavLink from "./NavLink.vue";
     import ThemeSwitch from "../ThemeSwitch/ThemeSwitch.vue";
-    import "flowbite";
+    import LanguageSelector from "../LanguageSelector/LanguageSelector.vue";
+    import { Dropdown } from "flowbite";
 </script>