NUXT_FRONTEND/components/Admin/Navbar.vue

<template>
  <v-toolbar dark>
    <nuxt-link to="/admin/publications" class="subheading">
      <div class="amic-logo-invert">
        <img :src="require('~/static/svg/symbol/amic-logo.svg')" />
      </div>
    </nuxt-link>

    <v-spacer></v-spacer>
    <client-only>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn
          v-for="route in allowedRoutes"
          :key="route.code"
          link
          :to="route.url"
        >
          {{ route.title }}
        </v-btn>

        <v-btn link to="/user/profile">
          <v-icon left> mdi-account-outline </v-icon>
        </v-btn>
      </v-toolbar-items>
    </client-only>
    <!--<v-app-bar-nav-icon ></v-app-bar-nav-icon>-->
  </v-toolbar>
</template>

<script>
export default {
  head() {
    return {
      title: "Административный кабинет",
    };
  },

  data: () => ({
    role: null,

    routes: [
      {
        code: "users",
        title: "Пользователи",
        url: "/admin/users",
      },
      {
        code: "publications",
        title: "Публикации",
        url: "/admin/publications",
      },
      {
        code: "comments",
        title: "Комментарии",
        url: "/admin/comments",
      },
      {
        code: "log",
        title: "Лог комментариев",
        url: "/admin/comments/log",
      },
      {
        code: "sections",
        title: "Секции",
        url: "/admin/sections",
      },
      {
        code: "sliders",
        title: "Слайдеры",
        url: "/admin/sliders",
      },
      {
        code: "advertising",
        title: "Реклама",
        url: "/admin/advertising",
      },
      {
        code: "pages",
        title: "Страницы",
        url: "/admin/pages",
      },
      {
        code: "menu",
        title: "Меню",
        url: "/admin/menu"
      }
    ],

    roles: [
      {
        code: 2,
        name: "Менеджер по рекламе",
        routes: ["advertising"],
      },
      {
        code: 3,
        name: "Репортер",
        routes: [
          "publications",
          "sections",
          "sliders"
        ],
      },
      {
        code: 4,
        name: "Модератор",
        routes: [
          "comments",
          "sections",
          "sliders"
        ],
      },
      {
        code: 5,
        name: "Администратор",
        routes: [
          "users",
          "publications",
          "comments",
          "log",
          "sections",
          "advertising",
          "pages",
          "menu",
          "sliders"
        ],
      },
      {
        code: 6,
        name: "ФСБ",
        routes: ["log"],
      },
    ],
  }),

  beforeMount() {
    this.roleCode = this.$auth.user.user_permission_group;
  },

  computed: {
    currentRole() {
      return this.roles.find((role) => role.code == this.roleCode);
    },

    allowedRoutes() {
      if (!this.currentRole) return [];

      return this.routes.filter((route) =>
        this.currentRole.routes.includes(route.code)
      );
    },
  },
};
</script>

<style lang="less">
.amic-logo-invert {
  filter: invert(100%);
}
</style>