SEECBC/FrontEnd/components/base/AppBar.vue

<template>
  <v-app-bar
    app
    clipped-left
    color="white"
    flat
    fixed
    height="56"
  >
    <v-app-bar-nav-icon class="hidden-md-and-down" @click.stop="miniVariant = !miniVariant" />
    <v-app-bar-nav-icon class="hidden-lg-and-up" @click.stop="toggleDrawer" />
    <v-toolbar-title class="mr-12 align-center">
      <span class="title">SEEC-BC</span>
      <v-spacer />
    </v-toolbar-title>
  </v-app-bar>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  computed: {
    miniVariant: {
      get() {
        return this.$accessor.miniDrawer
      },

      set(value: boolean) {
        this.$accessor.setMiniDrawer(value)
      }
    },
    drawer: {
      get() {
        return this.$accessor.drawer
      },
      set(value: boolean) {
        this.$accessor.setDrawer(value)
      }
    }
  },
  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer
      this.miniVariant = false
    }
  }
})
</script>

<style scoped></style>