flaschengeist-frontend/src/components/TitleBar.vue

<template>
  <v-app-bar app clipped-left clipped-right hide-on-scroll color="blue accent-4" class="elevation-4" dark>
    <v-btn icon>
      <v-img src="@/assets/logo-big.png" contain height="40"></v-img>
    </v-btn>
    <v-toolbar-title>WU5-Dashboard</v-toolbar-title>
    <v-spacer />
    <v-btn icon v-if="isFinanzer">
      <v-icon>{{attach_money}}</v-icon>
    </v-btn>
    <v-btn icon v-if="isBar">
      <v-icon>{{local_bar}}</v-icon>
    </v-btn>
    <v-btn icon v-if="isUser">
      <v-icon>{{person}}</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { mdiCurrencyEur, mdiGlassCocktail, mdiAccount } from '@mdi/js'

export default {
  name: 'TitleBar',
  data () {
    return {
      attach_money: mdiCurrencyEur,
      local_bar: mdiGlassCocktail,
      person: mdiAccount
    }
  },
  computed: {
    ...mapGetters(['isBar', 'isFinanzer', 'isUser', 'isLoggedIn'])
  },
  methods: {
    ...mapActions(['logout'])
  },

}
</script>

<style scoped>
</style>