jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

Browse Source 
git-subtree-dir: frontend
git-subtree-mainline: 205a3bd14b
git-subtree-split: c070c0315d
This commit is contained in:
Jonathan Bourdon
2025-01-15 15:24:17 -05:00
parent 205a3bd14b c070c0315d
commit ab911955ed
318 changed files with 29301 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
frontend/src/views/main/SideBar.vue Normal file
View File

@@ -0,0 +1,159 @@
<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 {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useSideBarStore} from "@/stores/sideBarStore.js";
const {locale} = useI18n();
const router = useRouter();
const selectedLanguage = ref(locale.value);
const userProfileStore = useUserProfileStore();
const creatorProfileStore = useCreatorProfileStore();
const authStore = useAuthStore();
const sideBarStore = useSideBarStore();
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId);
const createHtmlContent = () => {
router.push('/content/editor');
};
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);
}
function toggleMenu() {
sideBarStore.toggle();
}
initializeLocale();
</script>
<template>
<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="/@hutopy">
<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 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>-->
<div
class="border-b border-gray-300 my-4 mx-auto"
:class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
></div>
<div class="flex-grow"></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"
referrerpolicy="no-referrer"
class="rounded-full"
width="42"
height="42"
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-col gap-4 mb-4">
<!-- <router-link v-if="creatorProfileStore.hasCreator" :to="`/content/editor`">-->
<!-- <v-btn class="w-full justify-start" prepend-icon="mdi-pencil" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">-->
<!-- <span v-if="sideBarStore.isOpen">Éditeur</span>-->
<!-- </v-btn>-->
<!-- </router-link>-->
<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"
to="/create-creator">
<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>
<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>
</div>
<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">{{ $t('language.language') }}</span>
</v-btn>
<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">{{ $t('sidebar.Reduce') }}</span>
</v-btn>
<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">{{ $t('sidebar.connection') }}</span>
</v-btn>
</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>