set translations en and es

src/components/Header.vue

@@ -1,8 +1,73 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import CustomPopup from './CustomPopup.vue';
+import { ref } from 'vue';
+import { onMounted } from 'vue';
+import { watch } from 'vue';
+
+const { t, locale } = useI18n();
+
+const openPopup = ref(false);
+const options = ref([]);
+const lang = ref(null);
+
+onMounted(() => {
+    const langInit = localStorage.getItem('lang') ?? locale.value;
+    locale.value = langInit
+    lang.value = {value: langInit, label: langInit == 'en' ? t('global.en') : t('global.es')}
+    options.value = [
+        {value: 'es',label: t('global.es')},
+        {value: 'en',label: t('global.en')},
+    ]
+});
+
+const changeLang = () => {
+    if(locale.value == 'es') {
+        locale.value = 'en'
+        lang.value = {
+            value: 'en',
+            label: ''
+        }
+    } else {
+        locale.value = 'es'
+        lang.value = {
+            value: 'es',
+            label: ''
+        }
+    }
+    localStorage.setItem('lang', locale.value);
+    openPopup.value = false
+}
+
+watch(lang, () => {
+    options.value = [
+        {value: 'es',label: t('global.es')},
+        {value: 'en',label: t('global.en')},
+    ]
+})
+
+const closePopup = () => {
+    openPopup.value = false
+}
 
 </script>
 
 <template>
+    <div
+        v-if="openPopup"
+    >
+        <CustomPopup 
+            :options="options" 
+            :value="lang" 
+            @change-value="changeLang"
+            @close-popup="closePopup"
+            selected-color="#e3a11e"
+            :style="{
+                right: '30px',
+                top: '70px',
+            }"
+        />
+    </div>
     <div class="header-content">
       <div class="box-content">
         <RouterLink
@@ -13,8 +78,11 @@
         <div class="box-register">
           <p class="title-header">Tablero de <span class="title-main">Embarques</span> y <span class="title-main">Transportes</span></p>
         </div>
-      </div>
     </div>
+    <a 
+        @click="openPopup = true"
+        class="lang"><i class="fa-solid fa-globe"></i> {{ locale }}</a>
+</div>
 </template>
 
 <style scoped>
@@ -47,6 +115,15 @@
         font-weight: 900;
         color: #FFF;
     }
+
+    .lang {
+        color: #FFF;
+        text-decoration: none;
+        align-items: center;
+        align-self: center;
+        align-content: center;
+        cursor: pointer;
+    }
     
     .app-btn{
         background-color: #FBBA33;