<template>
  <v-app-bar :app="$vuetify.breakpoint.mdAndDown" :color="$vuetify.breakpoint.mdAndDown ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0,0,0,0)'" class="dashboard-toolbar mb-5" flat :prominent="$vuetify.breakpoint.lgAndUp">

    <v-btn depressed tile @click.stop="toggleNavigationDrawer(true)" color="rgba(255, 255, 255, 0.8)" class="hidden-lg-and-up mr-5" :ripple="false">
      <v-icon color="accent">mdi-menu</v-icon>
    </v-btn>

    <v-toolbar-title class="text-h4" :class="{'pl-0': $vuetify.breakpoint.lgAndUp}">
      {{ title }}
    </v-toolbar-title>

    <v-spacer></v-spacer>

    <v-btn v-show="!hideDrawer" depressed tile @click.stop="toggleRightDrawer(true)" color="rgba(255, 255, 255, 0.8)" class="hidden-lg-and-up ml-5" :ripple="false">
      <v-icon color="accent">mdi-chevron-left</v-icon>
    </v-btn>
  </v-app-bar>
</template>

<script>
export default {
  name: "AppBar",
  props: ['title', 'hideDrawer'],
  methods: {
    toggleNavigationDrawer(value) {
      this.$store.dispatch('site/toggleNavigationDrawer', value)
    },
    toggleRightDrawer(value) {
      this.$store.dispatch('site/toggleRightDrawer', value)
    },
  },
  mounted() {
    if (!this.$vuetify.breakpoint.mdAndDown) {
      this.toggleNavigationDrawer(true)
      this.toggleRightDrawer(true)
    }
  }
}
</script>

<style scoped>

</style>