flaschengeist-frontend/src/components/navigation/EssentialExpansionLink.vue

<template>
  <q-expansion-item v-if="isGranted(entry)" clickable tag="a" target="self" :label='title' :icon='entry.icon' expand-separator>
      <q-list class='q-ml-lg'>
        <div v-for='child in entry.children' :key='child.link'>
    <q-item v-if='isGranted(child)' clickable :to='{name: child.link}'>
      <q-menu context-menu>
        <q-btn v-close-popup label='Verknüpfung erstellen' dense @click='addShortCut(child)'/>
      </q-menu>
      <q-item-section avatar>
        <q-icon :name='child.icon' />
      </q-item-section>
      <q-item-section>
        <q-item-label>
          {{child.title}}
        </q-item-label>
      </q-item-section>
    </q-item>
        </div>
      </q-list>
  </q-expansion-item>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import { hasPermissions } from 'src/utils/permission';
import { FG_Plugin } from 'src/plugins';

export default defineComponent({
  name: 'EssentialExpansionLink',
  components: {  },
  props: {
    entry: {
      type: Object as PropType<FG_Plugin.MenuLink>,
      required: true,
    },
  },
  emits: {
    addShortCut: (val: FG_Plugin.MenuLink) => val.link,
  },
  setup(props, {emit}) {

    function isGranted(val: FG_Plugin.MenuLink) { return hasPermissions(val.permissions || [])};
    const title = computed(() =>
      typeof props.entry.title === 'object' ? props.entry.title.value : props.entry.title
    );
    function addShortCut(val: FG_Plugin.MenuLink) {
      emit('addShortCut', val)
    }

    return { isGranted, title, addShortCut};
  },
});
</script>