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

Update the sidebar

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-10 15:44:14 -05:00
parent 3de5b7e4ce
commit cf7781f9a7
2 changed files with 65 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/medias/hutopy.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 39 KiB

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

@@ -34,85 +34,92 @@ function toggleLanguage() {
</script> </script>
<template> <template>
<nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-4"> <nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-1">
<div class="mt-4 px-4"> <div class="mt-4 px-4">
<router-link to="/@hutopy"> <router-link to="/@hutopy">
<img src="/medias/hutopy.png" <img src="/images/hutopy-logo.png"
alt="hutopy logo" alt="hutopy logo">
width="300"
height="64">
</router-link> </router-link>
</div> </div>
<div class="flex-grow"></div> <div class="flex-grow"></div>
<div class="px-4">
<div class="flex items-center justify-start p-2 mb-4"> <div class="flex flex-col gap-4 p-4">
<div class="flex items-center justify-start">
<img :src="userProfileStore.portraitUrl" <img :src="userProfileStore.portraitUrl"
alt="Profile Image" alt="Profile Image"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
class="rounded-full" class="rounded-full"
width="42" height="42"> width="42"
<span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span> height="42">
<span class="profile">{{ userProfileStore.alias }}</span>
</div> </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}`">
<div v-if="authStore.isAuthenticated"> <button class="action">
<router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`"> <i class="mdi mdi-file-account-outline"></i>
<button class="action"> {{ t.myPage }}
<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> </button>
</div> </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>
<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> </nav>
</template> </template>
<style scoped> <style scoped>
.profile {
@apply ml-4 text-lg font-sans capitalize text-hOnBackground;
@apply font-sans font-semibold;
}
.action { .action {
@apply capitalize w-full flex items-center gap-2 px-4 py-2 text-sm bg-hSecondary text-hOnSecondary rounded; @apply w-full flex items-center gap-4 px-4 py-2 rounded;
@apply hover:bg-hTertiary hover:text-hOnTertiary; @apply capitalize text-base font-sans font-medium;
@apply bg-hSecondary text-hOnSecondary;
@apply hover:brightness-90;
} }
</style> </style>