145 lines
No EOL
3.1 KiB
Vue
145 lines
No EOL
3.1 KiB
Vue
<template>
|
|
<div class="switcher" ref="switcherRef">
|
|
<div
|
|
@click="setSwitcherVisible(!isSwitcherVisible)"
|
|
class="switcher__button"
|
|
:class="[{ active: isSwitcherVisible }]"
|
|
>
|
|
<client-only>
|
|
<!-- <icon name="fluent:globe-20-filled" size="20" />-->
|
|
<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="uiSwitchLanguage(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';
|
|
|
|
const languageStore = useLanguageStore();
|
|
|
|
const locales = computed(() => languageStore.languages);
|
|
const currentLocale = computed(() => languageStore.currentLocale);
|
|
|
|
const isSwitcherVisible = ref<boolean>(false);
|
|
const setSwitcherVisible = (state: boolean) => {
|
|
isSwitcherVisible.value = state;
|
|
};
|
|
|
|
const switcherRef = ref(null);
|
|
onClickOutside(switcherRef, () => isSwitcherVisible.value = false);
|
|
|
|
const { switchLanguage } = useLanguageSwitch();
|
|
|
|
const uiSwitchLanguage = (localeCode: string) => {
|
|
switchLanguage(localeCode);
|
|
setSwitcherVisible(false);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.switcher {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 44px;
|
|
flex-shrink: 0;
|
|
|
|
&__button {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 5px;
|
|
padding: 5px;
|
|
border-radius: $default_border_radius;
|
|
transition: 0.2s;
|
|
|
|
@include hover {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&.active {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
& 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: 3px 5px;
|
|
background-color: #cccccc;
|
|
transition: 0.1s;
|
|
|
|
&:first-child {
|
|
padding-top: 5px;
|
|
}
|
|
&:last-child {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
@include hover {
|
|
background-color: #b2b2b2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |