Add disabled state to back button

Author: kadiryazici

src/components/AppSidebar.vue

@@ -24,7 +24,7 @@ function handleBack() {
   <nav class="nav">
     <div class="upper">
       <SidebarButton
-        v-if="store.currentPage === Page.Settings"
+        :disabled="store.currentPage !== Page.Settings"
         @click="handleBack"
       >
         <Icons.ChevronLeft />

src/components/SidebarButton.vue

@@ -1,5 +1,19 @@
+<script lang="ts" setup>
+interface Props {
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+</script>
+
 <template>
-  <button class="sidebar-button">
+  <button
+    class="sidebar-button"
+    :disabled="disabled || undefined"
+    :class="{ disabled }"
+  >
     <slot />
   </button>
 </template>
@@ -12,17 +26,23 @@
   border: 1px solid transparent;
   @include focus-visible;
 
-  &:active {
-    background-color: var(--item-hover-bg);
+  &.disabled {
+    opacity: .3;
+  }
+
+  &:not(.disabled) {
+    &:active {
+      background-color: var(--item-hover-bg);
 
-    :deep(.icon) {
-      color: var(--white);
+      :deep(.icon) {
+        color: var(--white);
+      }
     }
-  }
 
-  &:hover {
-    :deep(.icon) {
-      color: var(--white);
+    &:hover {
+      :deep(.icon) {
+        color: var(--white);
+      }
     }
   }