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>
<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">
<router-link to="/@hutopy">
<img src="/medias/hutopy.png"
alt="hutopy logo"
width="300"
height="64">
<img src="/images/hutopy-logo.png"
alt="hutopy logo">
</router-link>
</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"
alt="Profile Image"
referrerpolicy="no-referrer"
class="rounded-full"
width="42" height="42">
<span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span>
width="42"
height="42">
<span class="profile">{{ userProfileStore.alias }}</span>
</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}`">
<button class="action">
<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 }}
<div v-if="authStore.isAuthenticated">
<router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
<button class="action">
<i class="mdi mdi-file-account-outline"></i>
{{ t.myPage }}
</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 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>
</nav>
</template>
<style scoped>
.profile {
@apply ml-4 text-lg font-sans capitalize text-hOnBackground;
@apply font-sans font-semibold;
}
.action {
@apply capitalize w-full flex items-center gap-2 px-4 py-2 text-sm bg-hSecondary text-hOnSecondary rounded;
@apply hover:bg-hTertiary hover:text-hOnTertiary;
@apply w-full flex items-center gap-4 px-4 py-2 rounded;
@apply capitalize text-base font-sans font-medium;
@apply bg-hSecondary text-hOnSecondary;
@apply hover:brightness-90;
}
</style>