Improve sidebar buttons

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>