exchange/resources/assets/js/pages/settings/index.vue

<template>
  <div class="row">
    <div class="col-md-3">
      <card :title="$t('settings')" class="settings-card">
        <ul class="nav flex-column nav-pills">
          <li v-for="tab in tabs" :key="tab.route" class="nav-item">
            <router-link v-if="(role == tab.role)" :to="{ name: tab.route }" class="nav-link" active-class="active">
              <fa :icon="tab.icon" fixed-width/> {{ tab.name }}
            </router-link>
          </li>
        </ul>
      </card>
    </div>

    <div class="col-md-9">
      <transition name="fade" mode="out-in">
        <router-view/>
      </transition>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    middleware: 'check-auth',

    computed: {
      role() {
        return this.$store.getters['auth/role']
      },
      tabs() {
        return [{
            icon: 'user',
            name: this.$t('profile'),
            route: 'settings.profile',
            role: 'member'
          },
          {
            icon: 'lock',
            name: this.$t('password'),
            route: 'settings.password',
            role: 'member'
          },
          {
            icon: 'user',
            name: this.$t('Supplier'),
            route: 'settings.admin-supplier',
            role: 'admin'
          },
          {
            icon: 'cog',
            name: this.$t('Credit Setting'),
            route: 'settings.admin-credit-setting',
            role: 'admin'
          },
          {
            icon: 'flag',
            name: this.$t('CIEF China Bank'),
            route: 'settings.admin-china-bank',
            role: 'admin'
          },
          {
            icon: 'building',
            name: this.$t('Bank Setting'),
            route: 'settings.admin-bank-setting',
            role: 'admin'
          },
        ]
      }
    }


  }
</script>

<style>
  .settings-card .card-body {
    padding: 0;
  }
</style>