61 lines
2.0 KiB
Vue
61 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { SUPPORT_LOCALES } from "@/i18n";
|
|
import type { AvailableLanguages } from "@/stores/user";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
|
import * as log from "loglevel";
|
|
|
|
log.debug("AppFooter created");
|
|
|
|
const userStore = useUserStore();
|
|
const hideVersion = import.meta.env.VITE_SENTRY_ENV === "production";
|
|
|
|
async function changeLocale(language: AvailableLanguages) {
|
|
userStore.setUserLanguages(language);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="flex flex-col border-t bg-gray-200 px-8 py-4 lg:flex-row">
|
|
<div>{{ $t("footer.copyright") }}</div>
|
|
<div class="lg:ml-8">
|
|
<a :href="$t('footer.dataProtectionLink')">
|
|
{{ $t("footer.dataProtectionText") }}
|
|
</a>
|
|
</div>
|
|
<div class="lg:ml-8">
|
|
<a :href="$t('footer.imprintLink')">
|
|
{{ $t("footer.imprintText") }}
|
|
</a>
|
|
</div>
|
|
<div class="flex-grow"></div>
|
|
<div :class="{ hidden: hideVersion }">VBV_VERSION_BUILD_NUMBER_VBV</div>
|
|
<Menu>
|
|
<MenuButton class="lg:ml-8" data-cy="language-switch-button">
|
|
<it-icon-globe class="relative top-[2px] h-4 w-4" />
|
|
<span class="ml-2 inline">{{ $t(`language.${userStore.language}`) }}</span>
|
|
</MenuButton>
|
|
<div class="relative">
|
|
<MenuItems
|
|
class="lg:right- absolute -right-2/3 -top-24 w-40 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
>
|
|
<MenuItem v-for="locale in SUPPORT_LOCALES" :key="locale" class="py-1">
|
|
<button
|
|
class=""
|
|
:data-cy="`language-selector-${locale}`"
|
|
@click="changeLocale(locale)"
|
|
>
|
|
<span class="ml-2 inline">{{ $t(`language.${locale}`) }}</span>
|
|
</button>
|
|
</MenuItem>
|
|
</MenuItems>
|
|
</div>
|
|
</Menu>
|
|
<div class="lg:ml-8">
|
|
<a :href="$t('footer.contactLink')">{{ $t("footer.contactText") }}</a>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped></style>
|