App: Added a sidebar store with BannerAction to adjust the z-depth. CreatorLayout: Resized the content with the sidebar and added the option for a closed or open menu. Also added a value in SidebarStore to track the menu state for correct positioning.
This commit is contained in:
PascalMarchesseault
@@ -1,11 +1,12 @@
|
||||
<script setup>
|
||||
import SubscriptionList from "@/views/creators/SubscriptionList.vue";
|
||||
import {useAuthStore} from "@/stores/authStore.js";
|
||||
import {useRouter} from 'vue-router';
|
||||
import {computed, ref} from "vue";
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
|
||||
import { useAuthStore } from "@/stores/authStore.js";
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
|
||||
import {useUserProfileStore} from "@/stores/userProfileStore.js";
|
||||
import {useSideBarStore} from "@/stores/sideBarStore.js";
|
||||
|
||||
const {locale} = useI18n();
|
||||
const router = useRouter();
|
||||
@@ -14,6 +15,7 @@ const selectedLanguage = ref(locale.value);
|
||||
const userProfileStore = useUserProfileStore();
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
const authStore = useAuthStore();
|
||||
const sideBarStore = useSideBarStore();
|
||||
|
||||
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId);
|
||||
|
||||
@@ -34,46 +36,56 @@ function toggleLanguage() {
|
||||
localStorage.setItem('preferredLocale', lang);
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
sideBarStore.toggle();
|
||||
}
|
||||
|
||||
initializeLocale();
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<nav class="flex flex-col h-full bg-white">
|
||||
|
||||
<!-- APP SECTION -->
|
||||
<div class="px-4 mt-4">
|
||||
|
||||
<!-- LOGO HUTOPY -->
|
||||
<nav :class="['fixed flex flex-col h-full bg-white border-r border-gray-300', sideBarStore.isOpen ? 'max-w-64 px-4' : 'max-w-[82px] px-2']">
|
||||
<!-- LOGO HUTOPY -->
|
||||
<div class="mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
|
||||
<router-link to="/">
|
||||
<img src="/images/hutopymedia/banners/hutopy.png"
|
||||
<img v-if="sideBarStore.isOpen"
|
||||
src="/images/hutopymedia/banners/hutopy.png"
|
||||
alt="hutopy"
|
||||
width="300px"
|
||||
height="64px">
|
||||
<img v-else
|
||||
src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
|
||||
alt="hutopy"
|
||||
width="42px"
|
||||
height="42px">
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="creatorIsCurrentUser" class="justify-center text-center">
|
||||
<v-btn variant="flat" icon="" @click="createHtmlContent">
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</div>
|
||||
<!-- SUBSCRIPTION SECTION -->
|
||||
<div class="flex-grow px-4 mt-4">
|
||||
<template v-if="authStore.isAuthenticated">
|
||||
<div class="font-bold"> {{ $t('sidebar.subscriptionTitle') }}</div>
|
||||
<!-- SUBSCRIPTION LIST -->
|
||||
<subscription-list>
|
||||
</subscription-list>
|
||||
<div class="flex-grow mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
|
||||
<template v-if="authStore.isAuthenticated">
|
||||
<div class="font-bold" :class="{ 'text-center': !sideBarStore.isOpen }">
|
||||
<span v-if="sideBarStore.isOpen">{{ $t('sidebar.subscriptionTitle') }}</span>
|
||||
<span v-else>A</span>
|
||||
</div>
|
||||
<div
|
||||
class="border-b border-gray-300 my-4 mx-auto"
|
||||
:class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
|
||||
></div>
|
||||
<subscription-list v-if="sideBarStore.isOpen"></subscription-list>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-4" style="border-width: 1px; border-color: black;"></v-divider>
|
||||
<!-- USER SECTION -->
|
||||
<div class="px-4 mb-4">
|
||||
<div class="flex items-center justify-start p-2 mb-4">
|
||||
<div
|
||||
class="border-b border-gray-300 my-4 mx-auto"
|
||||
:class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
|
||||
></div>
|
||||
|
||||
|
||||
|
||||
<!-- SECTION UTILISATEUR -->
|
||||
<div :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
|
||||
<div class="flex items-center justify-start p-2 mb-4" :class="!sideBarStore.isOpen ? 'my-2' : ''">
|
||||
<img
|
||||
:src="userProfileStore.portraitUrl"
|
||||
alt="Profile Image"
|
||||
@@ -81,73 +93,52 @@ initializeLocale();
|
||||
class="rounded-full"
|
||||
width="42"
|
||||
height="42"
|
||||
style="max-height: 42px;"
|
||||
>
|
||||
<span class="ml-2 text-sm font-sans capitalize">
|
||||
style="max-height: 42px;">
|
||||
<span v-if="sideBarStore.isOpen" class="ml-2 text-sm font-sans capitalize">
|
||||
{{ userProfileStore.alias }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-column gap-4">
|
||||
<!-- YOUR PAGE -->
|
||||
<router-link v-if="creatorProfileStore.hasCreator"
|
||||
:to="`/@${creatorProfileStore.creator.name}`">
|
||||
<v-btn class="w-full justify-start"
|
||||
prepend-icon="mdi-home-account"
|
||||
variant="flat">
|
||||
{{ creatorProfileStore.creator.name }}
|
||||
<div class="flex flex-col gap-4 mb-4">
|
||||
<router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
|
||||
<v-btn class="w-full justify-start" prepend-icon="mdi-home-account" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
|
||||
<span v-if="sideBarStore.isOpen">{{ creatorProfileStore.creator.name }}</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
|
||||
<router-link v-else-if="authStore.isAuthenticated"
|
||||
class="w-full justify-start"
|
||||
<router-link v-else-if="authStore.isAuthenticated" class="w-full justify-start"
|
||||
to="/profile?target=CreatorPage">
|
||||
<v-btn class="w-100" variant="plain">Activer votre page</v-btn>
|
||||
<v-btn class="w-full" variant="plain" :class="!sideBarStore.isOpen ? 'my-2' : ''"><span v-if="sideBarStore.isOpen">Activer votre page</span></v-btn>
|
||||
</router-link>
|
||||
<!-- CREATE CONTENT -->
|
||||
|
||||
<!-- PROFILE -->
|
||||
<template v-if="authStore.isAuthenticated">
|
||||
<v-btn to="/profile"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-account"
|
||||
variant="flat">
|
||||
{{ $t('header.myprofile') }}
|
||||
<div v-if="authStore.isAuthenticated">
|
||||
<v-btn to="/profile" class="w-full justify-start" prepend-icon="mdi-account" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
|
||||
<span v-if="sideBarStore.isOpen">{{ $t('header.myprofile') }}</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- LANGUAGE -->
|
||||
<v-btn
|
||||
variant="flat"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-translate-variant"
|
||||
@click="toggleLanguage"
|
||||
>
|
||||
{{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
|
||||
<v-btn variant="flat" class="w-full justify-start" prepend-icon="mdi-translate-variant" @click="toggleLanguage" :class="!sideBarStore.isOpen ? 'my-2' : ''">
|
||||
<span v-if="sideBarStore.isOpen">{{ selectedLanguage.value === 'fr' ? 'Fr' : 'En' }}</span>
|
||||
</v-btn>
|
||||
|
||||
<!-- LOGIN / LOGOUT -->
|
||||
<template v-if="!authStore.isAuthenticated">
|
||||
<v-btn to="/login"
|
||||
variant="flat"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-login">
|
||||
Connexion
|
||||
<div>
|
||||
<v-btn @click="toggleMenu" variant="flat" class="w-full justify-start" :prepend-icon="sideBarStore.isOpen ? 'mdi-arrow-collapse-left' : 'mdi-arrow-collapse-right'" :class="!sideBarStore.isOpen ? 'my-2' : ''">
|
||||
<span v-if="sideBarStore.isOpen">{{ sideBarStore.isOpen ? 'Réduire' : '' }}</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-btn @click="authStore.logout"
|
||||
variant="flat"
|
||||
class="w-full justify-start"
|
||||
prepend-icon="mdi-logout">
|
||||
{{ $t('header.Signout') }}
|
||||
</div>
|
||||
|
||||
<div v-if="!authStore.isAuthenticated">
|
||||
<v-btn to="/login" variant="flat" class="justify-start" prepend-icon="mdi-login" :class="!sideBarStore.isOpen ? 'my-2' : ''">
|
||||
<span v-if="sideBarStore.isOpen">Connexion</span>
|
||||
</v-btn>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-btn @click="authStore.logout" variant="flat" class="justify-start" prepend-icon="mdi-logout" :class="!sideBarStore.isOpen ? 'my-2' : ''">
|
||||
<span v-if="sideBarStore.isOpen">{{ $t('header.Signout') }}</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user