-drag menu continua

src/components/CMenuItem/CMenuItem.scss

@@ -12,11 +12,6 @@
     height: 0.5px;
 }
 
-.router-link-active {
-    color: #027be3;
-    background-color: #dadada !important;
-    border-right: 2px solid #027be3;
-}
 
 .list-label:first-child {
     line-height: 20px;

src/components/CMenuItem/CMenuItem.ts

@@ -1,16 +1,7 @@
-import { computed, defineComponent, PropType } from 'vue';
+import { tools } from 'app/src/store/Modules/tools';
+import { defineComponent, PropType, computed } from 'vue';
 
-const norm = (path: string): string =>
-  path
-    .trim()
-    .replace(/^\/+|\/+$/g, '')
-    .toLowerCase();
-
-const toNormPath = (p: any): string => {
-  if (!p) return '';
-  if (typeof p === 'string') return norm(p);
-  return norm(p.path || '');
-};
+const norm = (path: string): string => tools.norm(path);
 
 export default defineComponent({
   name: 'CMenuItem',
@@ -21,52 +12,68 @@ export default defineComponent({
     getmymenuclass: { type: Function, required: true },
     getimgiconclass: { type: Function, required: true },
     clBase: { type: String, default: '' },
-    level: { type: Number, default: 1 },
+    mainMenu: { type: Boolean, default: false },
+    level: { type: Number, default: 0 },
   },
-  setup(props) {
-    const getmenuByPath = (input: any, depth = 0): any => {
-      if (depth > 5) return null;
-
-      const path = toNormPath(input);
-      if (!path) return null;
-
-      let page = props.tools.getmenuByPath ? props.tools.getmenuByPath(path) : null;
-      if (!page) return null;
-
-      // Evita loop
-      const selfPath = toNormPath(props.item);
-      if (selfPath && path === selfPath) return null;
-
-      return page;
-    };
-
+  emits: ['click'],
+  setup(props, { emit }) {
+    // Funzione per ottenere i figli ordinati
     const children = computed(() => {
       const item: any = props.item;
       const r2 = Array.isArray(item.routes2) ? item.routes2 : [];
       const sm = Array.isArray(item.sottoMenu) ? item.sottoMenu : [];
 
-      return [...r2, ...sm]
-        .map((ref) =>
-          typeof ref === 'string' || !ref.path ? getmenuByPath(ref, props.level) : ref
-        )
-        .filter(Boolean)
-        .sort((a: any, b: any) => (a.order ?? 0) - (b.order ?? 0));
+      let ris = null;
+
+      if (r2.length > 0) {
+        ris = [...r2]
+          .map((rec) => {
+            const norm = tools.norm(rec.path);
+            return props.tools.getmenuByPath(norm);
+          })
+          .filter(Boolean)
+          .sort((a: any, b: any) => (a.order ?? 0) - (b.order ?? 0));
+      } else {
+        ris = [...sm]
+          .map((path) => {
+            const norm = tools.norm(path);
+            return props.tools.getmenuByPath(norm);
+          })
+          .filter(Boolean)
+          .sort((a: any, b: any) => (a.order ?? 0) - (b.order ?? 0));
+      }
+      // console.log('RIS', ris);
+      return ris;
     });
 
+    // Determina se ha figli
     const hasChildren = computed(() => children.value.length > 0);
 
+    // Ottiene l'icona appropriata
     const icon = computed(() => {
       const item: any = props.item;
       return item.materialIcon || item.icon || 'far fa-file-alt';
-    })
+    });
+
+    // Gestisce il click
+    function makeClick(event: MouseEvent) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const route = props.getroute(props.item);
+
+      if (route) {
+        window.location.href = typeof route === 'string' ? route : route.path;
+      }
+
+      emit('click', props.item);
+    }
 
     return {
       children,
       hasChildren,
       icon,
-      makeClick: () => {
-        // niente per ora
-      },
+      makeClick,
     };
   },
 });

src/components/CMenuItem/CMenuItem.vue

@@ -1,12 +1,11 @@
 <template>
   <div :style="{ paddingLeft: `${level * 4}px` }">
     <q-separator v-if="item.isseparator" />
-
     <!-- Nodo con figli -->
     <q-expansion-item
       v-else-if="hasChildren"
       :header-class="getmymenuclass(item)"
-      :icon="item.materialIcon"
+      :icon="icon"
       :label="tools.getLabelByItem(item)"
       expand-icon="fas fa-chevron-down"
       active-class="my-menu-active"
@@ -26,7 +25,7 @@
 
     <!-- Foglia -->
     <router-link v-else :to="getroute(item)">
-      <q-item clickable :to="getroute(item)" @click="makeClick" active-class="my-menu-active">
+      <q-item clickable :to="getroute(item)" active-class="my-menu-active">
         <q-item-section thumbnail>
           <q-avatar
             :icon="item.materialIcon"