87 lines
2.5 KiB
Vue
87 lines
2.5 KiB
Vue
<template>
|
|
<header class="w-full bg-white border-b border-gray-200">
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center justify-between px-6 py-3">
|
|
<div class="flex items-center gap-x-2 sm:gap-x-4">
|
|
<img src="../public/logo-bravio.png" alt="logo-bravio" class="h-10 md:h-14 object-cover" />
|
|
<div class="w-0.25 h-10 bg-bg"></div>
|
|
<p class="text-sm md:text-base font-semibold text-bg font-montserrat text-wrap sm:text-nowrap">
|
|
{{ langcode === 'es' ? 'ASISTENTE VIRTUAL' : 'ASSISTENTE VIRTUAL' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<ButtonCTA
|
|
v-for="(lang, index) in languages"
|
|
:key="index"
|
|
size="xs"
|
|
:color="lang.code === langcode ? 'surface' : 'accent'"
|
|
:class="{
|
|
'hidden sm:block': lang.code !== langcode
|
|
}"
|
|
@click="handleLanguage(lang.code)"
|
|
>
|
|
{{ lang.label }}
|
|
</ButtonCTA>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-bg font-montserrat text-white text-sm md:text-base font-medium text-center md:text-left py-2 px-6">
|
|
{{ langcode === 'es' ? 'Crea tu Defensoría con guía y recursos' : 'Crie sua Defensoria com orientação e recursos' }}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex';
|
|
export default {
|
|
name: 'HeaderBravio',
|
|
props: {
|
|
logo: {
|
|
type: String,
|
|
default: '/public/logo-bravio.png'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
languages: [
|
|
{ code: 'es', label: 'Español', active: true },
|
|
{ code: 'pt', label: 'Português', active: false }
|
|
],
|
|
langcode: 'es'
|
|
};
|
|
},
|
|
watch: {
|
|
langcode(newValue, oldValue) {
|
|
if (newValue !== oldValue) {
|
|
this.setLangcode(this.langcode)
|
|
localStorage.setItem('langcode', this.langcode)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
let lang = localStorage.getItem('langcode')
|
|
|
|
// Si no hay idioma guardado o está mal definido
|
|
if (!lang || lang === 'undefined' || lang === 'null') {
|
|
// Valor por defecto (español)
|
|
lang = 'es'
|
|
localStorage.setItem('langcode', lang)
|
|
}
|
|
|
|
this.langcode = lang
|
|
this.setLangcode(lang)
|
|
},
|
|
methods: {
|
|
...mapActions(['setLangcode']),
|
|
handleLanguage(code) {
|
|
this.langcode = code;
|
|
this.setLangcode(code);
|
|
// Aquí puedes agregar la lógica real para cambiar idioma en Nuxt i18n
|
|
//console.log('Idioma cambiado a:', code);
|
|
}
|
|
}
|
|
};
|
|
</script>
|