feat: disabled menu

src/components/DrawerComponent.vue

@@ -7,7 +7,9 @@ const router = useRouter();
 
 const currentRoute = ref<string>('');
 
-const labelMenu = ref<{ label: string; icon: string; route: string }[]>([
+const labelMenu = ref<
+  { label: string; icon: string; route: string; disabled?: boolean }[]
+>([
   {
     label: 'drawerDashboard',
     icon: 'img:/file-account-outline.png',
@@ -33,16 +35,43 @@ const labelMenu = ref<{ label: string; icon: string; route: string }[]>([
     icon: 'raphael:package',
     route: '/product-service',
   },
-  { label: 'drawerQuotation', icon: 'raphael:package', route: '' },
-  { label: 'drawerRequestList', icon: 'raphael:package', route: '' },
-  { label: 'drawerWorkOrder', icon: 'raphael:package', route: '' },
-  { label: 'drawerInvoice', icon: 'raphael:package', route: '' },
+  {
+    label: 'drawerQuotation',
+    icon: 'raphael:package',
+    route: '',
+    disabled: true,
+  },
+  {
+    label: 'drawerRequestList',
+    icon: 'raphael:package',
+    route: '',
+    disabled: true,
+  },
+  {
+    label: 'drawerWorkOrder',
+    icon: 'raphael:package',
+    route: '',
+    disabled: true,
+  },
+  {
+    label: 'drawerInvoice',
+    icon: 'raphael:package',
+    route: '',
+
+    disabled: true,
+  },
   {
     label: 'drawerAccountingLedger',
     icon: 'mdi-account-cash-outline',
     route: '',
+    disabled: true,
+  },
+  {
+    label: 'drawerReport',
+    icon: 'mdi-file-chart-outline',
+    route: '',
+    disabled: true,
   },
-  { label: 'drawerReport', icon: 'mdi-file-chart-outline', route: '' },
 ]);
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
@@ -83,6 +112,7 @@ function navigateTo(label: string, destination: string) {
         v-for="v in labelMenu"
         :key="v.label"
         clickable
+        :disable="!!v.disabled"
         @click="navigateTo(v.label, v.route)"
         class="no-padding"
         :class="{ active: currentRoute === v.label, dark: $q.dark.isActive }"

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);
     }