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 09:56:43 -05:00
parent d1d73181f5
commit 9e9bbaf811
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,12 +55,12 @@ function toggleLanguage() {
<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="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"> <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="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"> <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>
@@ -68,27 +68,27 @@ function toggleLanguage() {
<div v-if="authStore.isAuthenticated"> <div v-if="authStore.isAuthenticated">
<router-link to="/profile"> <router-link to="/profile">
<button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"> <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="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded" <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="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"> <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="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"> class="action">
<i class="mdi mdi-logout"></i> {{ t.signOut }} <i class="mdi mdi-logout"></i> {{ t.signOut }}
</button> </button>
</div> </div>
@@ -96,3 +96,11 @@ function toggleLanguage() {
</div> </div>
</nav> </nav>
</template> </template>
<style scoped>
.action
{
@apply capitalize w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded;
}
</style>