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="px-4">
<div class="flex items-center justify-start p-2 mb-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" <img :src="userProfileStore.portraitUrl"
width="42" height="42" style="max-height: 42px;"> 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> <span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span>
</div> </div>
<div class="flex flex-col gap-4 mb-4"> <div class="flex flex-col gap-4 mb-4">
<div v-if="authStore.isAuthenticated"> <div v-if="authStore.isAuthenticated">
<router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`"> <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
<button class="action"> <button class="action">
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }} <i class="mdi mdi-file-account-outline"></i>
{{ t.myPage }}
</button> </button>
</router-link> </router-link>
<router-link v-else to="/create-creator"> <router-link v-else to="/create-creator">
<button class="action"> <button class="action">
<i class="mdi mdi-file-account-outline"></i> {{ t.myPage }} <i class="mdi mdi-file-account-outline"></i>
{{ t.myPage }}
</button> </button>
</router-link> </router-link>
</div> </div>
@@ -67,38 +73,43 @@ function toggleLanguage() {
<div v-if="authStore.isAuthenticated"> <div v-if="authStore.isAuthenticated">
<router-link to="/profile"> <router-link to="/profile">
<button class="action"> <button class="action">
<i class="mdi mdi-account"></i> {{ t.myProfile }} <i class="mdi mdi-account"></i>
{{ t.myProfile }}
</button> </button>
</router-link> </router-link>
</div> </div>
<button class="action" <button class="action"
@click="toggleLanguage"> @click="toggleLanguage">
<i class="mdi mdi-translate-variant"></i> {{ locale }} <i class="mdi mdi-translate-variant"></i>
{{ locale }}
</button> </button>
<div v-if="!authStore.isAuthenticated"> <div v-if="!authStore.isAuthenticated">
<router-link to="/login"> <router-link to="/login">
<button class="action"> <button class="action">
<i class="mdi mdi-login"></i> {{ t.signIn }} <i class="mdi mdi-login"></i>
{{ t.signIn }}
</button> </button>
</router-link> </router-link>
</div> </div>
<div v-else> <div v-else>
<button @click="authStore.logout" <button @click="authStore.logout"
class="action"> class="action">
<i class="mdi mdi-logout"></i> {{ t.signOut }} <i class="mdi mdi-logout"></i>
{{ t.signOut }}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
</template> </template>
<style scoped> <style scoped>
.action .action {
{ @apply capitalize w-full flex items-center gap-2 px-4 py-2 text-sm bg-hSecondary text-hOnSecondary rounded;
@apply capitalize w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded; @apply hover:bg-hTertiary hover:text-hOnTertiary;
} }
</style> </style>