flaschengeist-frontend/src/views/MainView.vue

<template>
  <div>
    <v-navigation-drawer
      v-if="isLoggedIn"
      mini-variant
      expand-on-hover
      app
      clipped
      permanent
      overflow
    >
      <v-list>
        <v-list-item v-if="isUser" class="title" link to="/main/user/add">
          <v-list-item-icon>
            <v-icon>person</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Account</v-list-item-title>
        </v-list-item>
        <v-list-item v-if="isBar" class="title" link to="/main/bar/geruecht">
          <v-list-item-icon>
            <v-icon>local_bar</v-icon>
          </v-list-item-icon>
          <v-list-item-title>
            Gerüchte
          </v-list-item-title>
        </v-list-item>
        <v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer/overview">
          <v-list-item-icon>
            <v-icon>attach_money</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Finanzer</v-list-item-title>
        </v-list-item>
      </v-list>
      <v-divider />
      <router-view name="finanzerNav" />
      <router-view name="userNav"/>
      <router-view name="barNav"/>
      <template v-slot:append>
        <v-list>
          <v-list-item>
            <v-list-item-icon>
              <v-icon>exit_to_app</v-icon>
            </v-list-item-icon>
            <v-list-item-title>
              <v-btn block text @click="logout">Logout</v-btn>
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </template>
    </v-navigation-drawer>
    <router-view />
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'MainView',
  components: {  },
  created() {
  },
  methods: {
    ...mapActions({
      logout: 'logout'
    })
  },
  computed: {
    ...mapGetters({
      group: 'group',
      isBar: 'isBar',
      isUser: 'isUser',
      isFinanzer: 'isFinanzer',
      isLoggedIn: 'isLoggedIn'
    })
  }
}
</script>

<style scoped></style>