src/components/LeftMenu.vue

@@ -10,12 +10,13 @@ import routes from 'src/router/modules';
 import LeftMenuItem from './LeftMenuItem.vue';
 import LeftMenuItemGroup from './LeftMenuItemGroup.vue';
 import VnInput from './common/VnInput.vue';
+import { useRouter } from 'vue-router';
 
 const { t } = useI18n();
 const route = useRoute();
 const quasar = useQuasar();
 const navigation = useNavigationStore();
-
+const router = useRouter();
 const props = defineProps({
     source: {
         type: String,
@@ -174,6 +175,35 @@ function normalize(text) {
         .replace(/[\u0300-\u036f]/g, '')
         .toLowerCase();
 }
+const searchModule = () => {
+    const moduleArrays = ref([]);
+    items.value.forEach((item) => {
+        moduleArrays.value.push({
+            title: getLocale(item.title).normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase(),
+            name: item.name
+        });
+    })
+    const searching = ref(false)
+    moduleArrays.value.find((module) => {
+    console.log(module.title);
+        if (module.title.includes(search.value.toLowerCase()) && !searching.value) {
+            searching.value = true;
+            router.push({ name: module.name });
+        }
+    })
+}
+
+const getLocale = (label) => {
+    const globalLocale = t(label);
+    return globalLocale;
+};
+const searchingValue = ref(false);
+function searchingFunction(evt) {
+    searchingValue.value = true;
+    if(evt === null) {
+        searchingValue.value = false;
+    }
+}
 </script>
 
 <template>
@@ -188,10 +218,12 @@ function normalize(text) {
                         filled
                         dense
                         autofocus
+                        @keyup.enter.stop="searchModule(search)"
+                        @update:model-value="searchingFunction($event)"
                     />
                 </QItem>
                 <QSeparator />
-                <template v-if="filteredPinnedModules.size">
+                <template v-if="filteredPinnedModules.size && !searchingValue">
                     <LeftMenuItem
                         v-for="[key, pinnedModule] of filteredPinnedModules"
                         :key="key"
@@ -215,11 +247,11 @@ function normalize(text) {
                     </LeftMenuItem>
                     <QSeparator />
                 </template>
-                <template v-for="item in filteredItems" :key="item.name">
+                <template v-for="(item, index) in filteredItems" :key="item.name">
                     <template
-                        v-if="item.children && !filteredPinnedModules.has(item.name)"
+                        v-if="searchingValue ||item.children && !filteredPinnedModules.has(item.name)"
                     >
-                        <LeftMenuItem :item="item" group="modules">
+                        <LeftMenuItem :item="item" group="modules" :class="searchingValue && index === 0 ? 'searched' : ''">
                             <template #side>
                                 <QBtn
                                     v-if="item.isPinned === true"
@@ -336,6 +368,9 @@ function normalize(text) {
 .header {
     color: var(--vn-label-color);
 }
+.searched{
+    background-color: var(--vn-section-hover-color);
+}
 </style>
 <i18n>
     es: