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

Remove colors

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-08 02:38:41 -05:00
parent f4794fb817
commit 7f4e7ead40
36 changed files with 855 additions and 1138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/views/main/SideBar.vue
View File

@@ -31,106 +31,68 @@ const authStore = useAuthStore();
function toggleLanguage() {
locale.value = locale.value === 'fr' ? 'en' : 'fr';
}
</script>
<template>
<nav class="fixed flex flex-col h-full bg-white border-r border-gray-300 max-w-64 px-4">
<!-- LOGO HUTOPY -->
<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">
<img src="/medias/hutopy.png" alt="hutopy logo" width="300" height="64">
</router-link>
</div>
<div
class="border-b border-gray-300 my-4 mx-auto w-48"
></div>
<div class="border-b border-gray-300 my-4 mx-auto w-48"></div>
<div class="flex-grow"></div>
<!-- SECTION UTILISATEUR -->
<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-sm font-sans capitalize">
{{ userProfileStore.alias }}
</span>
<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">
<v-btn v-if="creatorProfileStore.hasCreator"
:to="`/@${creatorProfileStore.creator.name}`"
class="w-full justify-start"
prepend-icon="mdi-file-account-outline"
variant="flat">
{{ t.myPage }}
</v-btn>
<v-btn v-else
to="/create-creator"
variant="flat"
class="w-full justify-start"
prepend-icon="mdi-file-account-outline">
{{ t.myPage }}
</v-btn>
<router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
</button>
</router-link>
<router-link v-else to="/create-creator">
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
</button>
</router-link>
</div>
<div v-if="authStore.isAuthenticated">
<v-btn to="/profile"
class="w-full justify-start"
prepend-icon="mdi-account"
variant="flat">
{{ t.myProfile }}
</v-btn>
<router-link to="/profile">
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
<i class="mdi mdi-account"></i> {{ t.myProfile }}
</button>
</router-link>
</div>
<v-btn variant="flat"
class="w-full justify-start"
prepend-icon="mdi-translate-variant"
@click="toggleLanguage">
{{ locale }}
</v-btn>
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"
@click="toggleLanguage">
<i class="mdi mdi-translate-variant"></i> {{ locale }}
</button>
<div v-if="!authStore.isAuthenticated">
<v-btn to="/login"
variant="flat"
class="justify-start"
prepend-icon="mdi-login">
{{ t.signIn }}
</v-btn>
<router-link to="/login">
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
<i class="mdi mdi-login"></i> {{ t.signIn }}
</button>
</router-link>
</div>
<div v-else>
<v-btn @click="authStore.logout"
variant="flat"
class="justify-start"
prepend-icon="mdi-logout">
{{ t.signOut }}
</v-btn>
<button @click="authStore.logout"
class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded">
<i class="mdi mdi-logout"></i> {{ t.signOut }}
</button>
</div>
</div>
</div>
</nav>
</template>