100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
<script setup>
|
|
import SubscriptionList from "@/views/creators/SubscriptionList.vue";
|
|
import {useAuthStore} from "@/stores/authStore.js";
|
|
import {useRouter} from 'vue-router';
|
|
import {ref} from "vue";
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
const {locale} = useI18n();
|
|
const router = useRouter();
|
|
const selectedLanguage = ref(locale.value);
|
|
|
|
function initializeLocale() {
|
|
const preferredLocale = localStorage.getItem('preferredLocale');
|
|
selectedLanguage.value = preferredLocale === null ? locale.value : preferredLocale;
|
|
locale.value = selectedLanguage.value;
|
|
}
|
|
|
|
function toggleLanguage() {
|
|
const lang = selectedLanguage.value === 'fr' ? 'en' : 'fr';
|
|
locale.value = lang;
|
|
selectedLanguage.value = lang;
|
|
localStorage.setItem('preferredLocale', lang);
|
|
}
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
initializeLocale();
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex flex-col h-full overflow-y-auto custom-scrollbar bg-white">
|
|
|
|
<div class="flex justify-center py-3">
|
|
|
|
|
|
<v-btn
|
|
variant="text"
|
|
class="p-0 mx-0 min-w-0"
|
|
@click="toggleLanguage"
|
|
>
|
|
{{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
|
|
</v-btn>
|
|
</div>
|
|
<div class="border border-solid border-1"></div>
|
|
|
|
|
|
<div v-if="authStore.isAuthenticated" class="flex-grow px-5 py-4">
|
|
<div class="font-bold"> {{ $t('sidebar.subscriptionTitle') }}</div>
|
|
<div v-if="authStore.isAuthenticated" class="flex-grow px-5">
|
|
</div>
|
|
|
|
<subscription-list>
|
|
</subscription-list>
|
|
</div>
|
|
|
|
<div v-else class="flex-grow px-5 py-4 flex justify-center font-bold ">
|
|
<span>Connectez-vous</span>
|
|
</div>
|
|
|
|
</nav>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
nav {
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #903175 #f1f1f1;
|
|
}
|
|
|
|
/* Chrome, Safari) */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: #903175;
|
|
border-radius: 10px;
|
|
border: 2px solid #f1f1f1;
|
|
}
|
|
|
|
h2 {
|
|
@apply font-sans font-bold ml-2;
|
|
}
|
|
|
|
aside {
|
|
@apply relative;
|
|
}
|
|
</style>
|
|
|