feat: Main => branch&personnel router

src/components/home/MenuItem.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
 import AppBox from 'components/app/AppBox.vue';
 import AppCircle from 'components/app/AppCircle.vue';
 
+const router = useRouter();
+
 defineProps<{
   list: {
+    value: string;
     icon: string;
     title: string;
     caption: string;
@@ -19,6 +23,10 @@ defineProps<{
       | 'lime';
   }[];
 }>();
+
+function navigateTo(destination: string) {
+  router.push(`${destination}`);
+}
 </script>
 
 <template>
@@ -28,6 +36,7 @@ defineProps<{
       v-for="(v, i) in list"
       :key="i"
       :bordered="$q.dark.isActive"
+      @click="navigateTo(v.value)"
     >
       <AppCircle
         :class="`q-pa-sm menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
@@ -53,6 +62,7 @@ defineProps<{
     border: 1px solid transparent;
 
     &:hover {
+      cursor: pointer;
       border-color: var(--brand-1);
     }
   }