104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<script setup>
|
|
import {computed} from "vue";
|
|
import {useI18n} from "vue-i18n";
|
|
import {useAuthStore} from "@/stores/authStore.js";
|
|
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
|
|
import {useUserProfileStore} from "@/stores/userProfileStore.js";
|
|
|
|
const {locale} = useI18n();
|
|
const translations = {
|
|
en: {
|
|
myPage: "my page",
|
|
myProfile: "my profile",
|
|
reduce: "collapse",
|
|
signIn: "login",
|
|
signOut: "sign out"
|
|
},
|
|
fr: {
|
|
myPage: "ma page",
|
|
myProfile: "mon profil",
|
|
reduce: "réduire",
|
|
signIn: "connexion",
|
|
signOut: "se déconnecter"
|
|
}
|
|
};
|
|
const t = computed(() => translations[locale.value] || translations["en"]);
|
|
|
|
const userProfileStore = useUserProfileStore();
|
|
const creatorProfileStore = useCreatorProfileStore();
|
|
const authStore = useAuthStore();
|
|
|
|
function toggleLanguage() {
|
|
locale.value = locale.value === 'fr' ? 'en' : 'fr';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-4">
|
|
<div class="mt-4 px-4">
|
|
<router-link to="/@hutopy">
|
|
<img src="/medias/hutopy.png" alt="hutopy logo" width="300" height="64">
|
|
</router-link>
|
|
</div>
|
|
|
|
<div class="flex-grow"></div>
|
|
|
|
<div class="px-4">
|
|
<div class="flex items-center justify-start p-2 mb-4">
|
|
<img :src="userProfileStore.portraitUrl" alt="Profile Image" referrerpolicy="no-referrer" class="rounded-full"
|
|
width="42" height="42" style="max-height: 42px;">
|
|
<span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4 mb-4">
|
|
<div v-if="authStore.isAuthenticated">
|
|
<router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
|
|
<button class="action">
|
|
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
|
|
</button>
|
|
</router-link>
|
|
<router-link v-else to="/create-creator">
|
|
<button class="action">
|
|
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
|
|
</button>
|
|
</router-link>
|
|
</div>
|
|
|
|
<div v-if="authStore.isAuthenticated">
|
|
<router-link to="/profile">
|
|
<button class="action">
|
|
<i class="mdi mdi-account"></i> {{ t.myProfile }}
|
|
</button>
|
|
</router-link>
|
|
</div>
|
|
|
|
<button class="action"
|
|
@click="toggleLanguage">
|
|
<i class="mdi mdi-translate-variant"></i> {{ locale }}
|
|
</button>
|
|
|
|
<div v-if="!authStore.isAuthenticated">
|
|
<router-link to="/login">
|
|
<button class="action">
|
|
<i class="mdi mdi-login"></i> {{ t.signIn }}
|
|
</button>
|
|
</router-link>
|
|
</div>
|
|
<div v-else>
|
|
<button @click="authStore.logout"
|
|
class="action">
|
|
<i class="mdi mdi-logout"></i> {{ t.signOut }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.action
|
|
{
|
|
@apply capitalize w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded;
|
|
}
|
|
|
|
</style> |