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 to="/">
      <v-img src="@/assets/logo-big.png" contain height="40"></v-img>
    </v-btn>
    <v-toolbar-title>Flaschengeist</v-toolbar-title>
    <v-spacer />
    <v-btn icon v-if="isFinanzer" disabled>
      <v-icon>{{attach_money}}</v-icon>
    </v-btn>
    <v-btn icon v-if="isGastro" disabled>
      <v-icon>{{gastro}}</v-icon>
    </v-btn>
    <v-btn icon v-if="isBar" disabled>
      <v-icon>{{local_bar}}</v-icon>
    </v-btn>
    <v-btn icon v-if="isUser" disabled>
      <v-icon>{{person}}</v-icon>
    </v-btn>
    <v-btn icon to="/pricelist">
      <v-icon>{{list}}</v-icon>
    </v-btn>
  </v-app-bar>
</template>

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

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

}
</script>

<style scoped>
</style>