feat: disabled menu

src/components/home/MenuItem.vue

@@ -12,6 +12,7 @@ defineProps<{
     icon: string;
     title: string;
     caption: string;
+    disabled?: boolean;
     isax?: boolean;
     color:
       | 'green'
@@ -35,10 +36,11 @@ function navigateTo(destination: string) {
   <div class="menu-container">
     <AppBox
       class="column inline-flex items-center"
+      :class="{ disabled: !!v.disabled }"
       v-for="(v, i) in list"
       :key="i"
       :bordered="$q.dark.isActive"
-      @click="navigateTo(v.value)"
+      @click="!v.disabled && navigateTo(v.value)"
     >
       <AppCircle
         :id="`menu-icon-${v.value}`"
@@ -65,7 +67,11 @@ function navigateTo(destination: string) {
     transition: 100ms border-color ease-in-out;
     border: 1px solid transparent;
 
-    &:hover {
+    &.disabled {
+      opacity: 0.4;
+      filter: grayscale(1);
+    }
+    &:not(.disabled):hover {
       cursor: pointer;
       border-color: var(--brand-1);
     }