src/components/navigation/EssentialExpansionLink.vue

@@ -2,9 +2,7 @@
   <q-expansion-item
     v-if="isGranted(entry)"
     clickable
-    tag="a"
+    :label="getTitle(entry)"
-    target="self"
-    :label="title"
     :icon="entry.icon"
     expand-separator
   >
@@ -19,7 +17,7 @@
           </q-item-section>
           <q-item-section>
             <q-item-label>
-              {{ child.title }}
+              {{ getTitle(child) }}
             </q-item-label>
           </q-item-section>
         </q-item>
@@ -29,9 +27,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
-import { hasPermissions } from '@flaschengeist/api';
 import { FG_Plugin } from '@flaschengeist/types';
+import { useMainStore } from 'app/api';
 
 export default defineComponent({
   name: 'EssentialExpansionLink',
@@ -46,17 +44,20 @@ export default defineComponent({
     addShortCut: (val: FG_Plugin.MenuLink) => val.link,
   },
   setup(props, { emit }) {
+    const store = useMainStore();
+
     function isGranted(val: FG_Plugin.MenuLink) {
-      return hasPermissions(val.permissions || []);
+      return !val.permissions || val.permissions.every((p) => store.permissions.includes(p));
     }
-    const title = computed(() =>
+    function getTitle(entry: FG_Plugin.MenuLink) {
-      typeof props.entry.title === 'function' ? props.entry.title() : props.entry.title
+      return typeof entry.title === 'function' ? entry.title() : entry.title;
-    );
+    }
+
     function addShortCut(val: FG_Plugin.MenuLink) {
       emit('addShortCut', val);
     }
 
-    return { isGranted, title, addShortCut };
+    return { isGranted, getTitle, addShortCut };
   },
 });
 </script>