141 lines
No EOL
3 KiB
Vue
141 lines
No EOL
3 KiB
Vue
<template>
|
|
<div class="switcher" ref="switcherRef">
|
|
<div
|
|
@click="setSwitcherVisible(!isSwitcherVisible)"
|
|
class="switcher__button"
|
|
:class="[{ active: isSwitcherVisible }]"
|
|
>
|
|
<client-only>
|
|
<nuxt-img
|
|
format="webp"
|
|
densities="x1"
|
|
v-if="currentLocale"
|
|
:src="currentLocale.flag"
|
|
:alt="currentLocale.code"
|
|
/>
|
|
<skeletons-ui-language-switcher v-else />
|
|
<template #fallback>
|
|
<skeletons-ui-language-switcher />
|
|
</template>
|
|
</client-only>
|
|
</div>
|
|
<client-only>
|
|
<div
|
|
class="switcher__menu"
|
|
:class="[{active: isSwitcherVisible}]"
|
|
>
|
|
<div class="switcher__menu-wrapper">
|
|
<nuxt-img
|
|
class="switcher__menu-button"
|
|
v-for="locale of locales"
|
|
:key="locale.code"
|
|
format="webp"
|
|
densities="x1"
|
|
@click="switchLanguage(locale.code)"
|
|
:src="locale.flag"
|
|
:alt="locale.code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</client-only>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {onClickOutside} from "@vueuse/core";
|
|
import {useLanguageSwitch} from "@/composables/languages/index.js";
|
|
|
|
const languageStore = useLanguageStore()
|
|
|
|
const locales = computed(() => languageStore.languages)
|
|
const currentLocale = computed(() => languageStore.currentLocale)
|
|
|
|
const isSwitcherVisible = ref<boolean>(false)
|
|
const setSwitcherVisible = (state) => {
|
|
isSwitcherVisible.value = state
|
|
}
|
|
|
|
const switcherRef = ref(null)
|
|
onClickOutside(switcherRef, () => isSwitcherVisible.value = false)
|
|
|
|
const { switchLanguage } = useLanguageSwitch()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.switcher {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 52px;
|
|
flex-shrink: 0;
|
|
|
|
&__button {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 5px;
|
|
border: 1px solid $accent;
|
|
background-color: #ddd9ef;
|
|
padding: 5px;
|
|
border-radius: $default_border_radius;
|
|
transition: 0.2s;
|
|
|
|
@include hover {
|
|
background-color: $accent;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $accent;
|
|
}
|
|
|
|
& img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__menu {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 110%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border-radius: $default_border_radius;
|
|
display: grid;
|
|
grid-template-rows: 0fr;
|
|
transition: grid-template-rows 0.2s ease;
|
|
|
|
&-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&.active {
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
& > * {
|
|
min-height: 0;
|
|
}
|
|
|
|
&-button {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
padding: 5px 8px;
|
|
background-color: #ddd9ef;
|
|
transition: 0.1s;
|
|
|
|
&:first-child {
|
|
padding-top: 10px;
|
|
}
|
|
&:last-child {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $accent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |