From 9e9bbaf811f22f1eccab9efd793afb68aaaf22b7 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Sat, 8 Feb 2025 09:56:43 -0500
Subject: [PATCH] Improve sidebar buttons

---
 frontend/src/views/main/SideBar.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/main/SideBar.vue b/frontend/src/views/main/SideBar.vue
index b3c52b2..7b3d3c0 100644
--- a/frontend/src/views/main/SideBar.vue
+++ b/frontend/src/views/main/SideBar.vue
@@ -55,12 +55,12 @@ function toggleLanguage() {
       <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="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 }}
             </button>
           </router-link>
           <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 }}
             </button>
           </router-link>
@@ -68,27 +68,27 @@ function toggleLanguage() {
 
         <div v-if="authStore.isAuthenticated">
           <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 }}
             </button>
           </router-link>
         </div>
 
-        <button class="w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded"
+        <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="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 }}
             </button>
           </router-link>
         </div>
         <div v-else>
           <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 }}
           </button>
         </div>
@@ -96,3 +96,11 @@ function toggleLanguage() {
     </div>
   </nav>
 </template>
+
+<style scoped>
+ .action
+ {
+   @apply capitalize w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded;
+ }
+
+</style>
\ No newline at end of file