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

Improve sidebar buttons

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-08 10:03:00 -05:00
parent 53012cef7a
commit ac7d1aac79
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,21 +45,27 @@ function toggleLanguage() {
<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;">
<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>
</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 }}
<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 }}
<i class="mdi mdi-file-account-outline"></i>
{{ t.myPage }}
</button>
</router-link>
</div>
@@ -67,38 +73,43 @@ function toggleLanguage() {
<div v-if="authStore.isAuthenticated">
<router-link to="/profile">
<button class="action">
<i class="mdi mdi-account"></i> {{ t.myProfile }}
<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 }}
<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 }}
<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 }}
<i class="mdi mdi-logout"></i>
{{ t.signOut }}
</button>
</div>
</div>
</div>
</nav>
</template>
<style scoped>
.action
{
@apply capitalize w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded;
}
.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;
}
</style>