<Template> <div> <div class="pre-header z-depth-0">

Question

<Template> <div> <div class="pre-header z-depth-0">

<div class="container">
<div class="flex">
<div class="language">
<div class="switch">
<label>
{{ 'Russian' | localize }}
<input type="checkbox" v-model="isEnglish" />
<span class="lever"></span>
{{ 'English' | localize }}
</label>
</div>
</div>
<div class="user-links"></div>
</div>
</div>
</div>
<div class="header z-depth-1">
<div class="container">
<div>
<img src="../assets/site_logo.png" />
</div>
<div>
<router-link to="/">{{ 'HomePage' | localize }}</router-link> |
<router-link to="/about">About </router-link>
<router-link to="/about">Contacts</router-link>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data: () => ({
isEnglish: false,
}),
watch: {
isEnglish() {
const locale = this.isEnglish ? 'en-EN' : 'ru-RU'
console.log(locale)
this.changeLocale(locale)
},
},
methods: {
changeLocale(locale) {
this.$store.dispatch('setLocale', locale)
},
},
mounted() {
const locale = this.$store.getters.getLocale
this.isEnglish = locale === 'en-EN' ? true : false
},
created() {},
}
</script>

<style lang="scss" scoped>
.pre-header {
padding-top: 8px;
padding-bottom: 8px;
}
</style>