nuxt-frontend/components/Admin/LeftMenu.vue

<template>
  <v-list class="pa-4">
    <div class="mt-4 mb-10 d-flex">
      <v-btn fab text class="mr-6" @click="$emit('close-left-menu')">
        <v-icon x-small>icon-close</v-icon>
      </v-btn>

      <router-link :to="localePath('/manager')">
        <app-logo width="180" />
      </router-link>

      <v-spacer />
    </div>

    <v-list-group
      v-for="item in items"
      :key="item.title"
      v-model="item.active"
      :prepend-icon="item.icon"
      no-action
      color="accent"
      append-icon=""
    >
      <template v-slot:activator>
        <v-list-item-content>
          <v-list-item-subtitle v-text="item.title"></v-list-item-subtitle>
        </v-list-item-content>
      </template>

      <template v-for="subItem in item.items">
        <v-list-item
          nuxt
          @click
          exact
          :key="subItem.title"
          :to="localePath(subItem.to)"
        >
          <v-list-item-content>
            <v-list-item-subtitle v-text="subItem.title"></v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-list-group>
  </v-list>
</template>

<script>
import Util from '~/util'
import AppLogo from '~/components/Logo'

export default {
  components: {
    AppLogo,
  },

  data() {
    return {
      drawer: null,
      item: 1,
      roles: [],
    }
  },

  mounted() {
    this.roles = this.$auth.user.roles.map(({ name }) => name);
  },

  methods: {
    shouldShowItemByAllowRules(allowRules) {
      for (const allowRule of allowRules) {
        if (!this.checkAllowRule(allowRule)) {
          return false;
        }
      }

      return true;
    },

    checkAllowRule(allowRule) {
      if (Array.isArray(allowRule)) {
        return Util.findCommonValuesInArray(allowRule, this.roles);
      } else if ('boolean' === typeof allowRule) {
        return allowRule;
      } else {
        throw new Error('Unexpected allow rule');
      }
    },
  },

  computed: {
    userIsOnlyMemberEditor() {
      return this.$store.getters.isOnlyMemberEditor;
    },

    items() {
      const itemsArray = [
        {
          icon: 'icon-learningproducts',
          title: this.$t('learning.products'),
          allowed: [['super_admin', 'admin', 'operator']],
          items: [
            {
              title: this.$t('learning.all_products'),
              to: '/manager/learning/',
              allowed: [['super_admin', 'admin', 'operator', 'user']],
            },
            {
              title: this.$t('learning.filters.title'),
              to: '/manager/learning/filters',
              allowed: [['super_admin', 'admin', 'operator']],
            },
            {
              title: this.$t('learning.synonyms'),
              to: '/manager/learning/synonyms/',
              allowed: [['super_admin', 'admin', 'operator']],
            },
            {
              title: this.$t('learning.quality_standards'),
              to: '/manager/learning/quality-standards/',
              allowed: [['super_admin', 'admin', 'operator']],
            },
          ],
        },
        {
          icon: 'icon-members',
          title: this.$t('auth.account.management'),
          allowed: [['super_admin']],
          items: [
            {
              title: this.$t('learning.manage'),
              to: '/manager/accounts/',
              allowed: [['super_admin', 'admin']],
            },
          ],
        },
        {
          icon: 'icon-members',
          title: this.$t('members.management'),
          allowed: [
            ['super_admin', 'admin', 'operator', 'user'],
            !this.userIsOnlyMemberEditor,
          ],
          items: [
            {
              title: 'Ledencontrole',
              to: '/manager/members/control',
              allowed: [['super_admin', 'admin']],
            },
            {
              title: this.$store.getters.isSuperAdminOrAdmin
                ? this.$t('learning.manage')
                : 'Alle leden',
              to: '/manager/members/',
              allowed: [['super_admin', 'admin', 'operator', 'user']],
            },
            {
              title: 'Branches',
              to: '/manager/members/branches',
              allowed: [['super_admin', 'admin']],
            },
          ],
        },
        {
          icon: 'icon-members',
          title: this.$t('members.managementinfo'),
          allowed: [['super_admin', 'admin', 'operator']],
          items: [            
            {
              title: this.$t('members.report'),
              to: '/manager/members/report',
              allowed: [['member']],
            },
            {
              title: this.$t('members.manage'),
              to: '/manager/members/managementinfo',
              allowed: [['super_admin', 'admin']],
            },
          ],
        },

        {
          icon: 'icon-attributes',
          title: 'Lidmaatschapgegevens',
          allowed: [this.userIsOnlyMemberEditor],
          items: [{
            title: 'Bekijken',
            to: '/manager/members',
          }],
        },
        {
          icon: 'icon-managementinfo',
          title: 'Managementinformatie',
          allowed: [this.userIsOnlyMemberEditor],
          items: [{
            title: this.$t('members.report'),
            to: '/manager/members/report',
          }],
        },
      ];

      return itemsArray.filter(item => {
        if (!('allowed' in item)) {
          return true;
        } else if (Array.isArray(item.allowed)) {
          return this.shouldShowItemByAllowRules(item.allowed);
        } else {
          throw new Error('Expected allow ruleset to be an array');
        }
      });
    },
  },
}
</script>