cssd-back/resources/js/vue/components/core/Toolbar.vue

<template>
  <v-toolbar
    id="core-toolbar"

    flat
    prominent
    style="background: #eee;"
  >
    <div class="v-toolbar-title">
      <v-toolbar-title
        class="tertiary--text font-weight-light"
      >
        <v-btn
          v-if="responsive"
          class="default v-btn--simple"
          dark
          icon
          @click.stop="onClickBtn"
        >
          <v-icon>mdi-view-list</v-icon>
        </v-btn>
        {{ title }}
      </v-toolbar-title>
    </div>

    <v-spacer />
    <v-toolbar-items>
      <v-flex
        align-center
        layout
        py-2
      >
        <!-- <v-text-field
          v-if="responsiveInput"
          class="mr-4 mt-2 purple-input"
          label="Search..."
          hide-details
          color="purple"
        /> -->
        <v-menu
      :close-on-content-click="false"
      :nudge-width="200"
      offset-x
    >
      <template v-slot:activator="{ on }">

          <v-icon
          v-ripple
          class="toolbar-items"
          v-on="on"
          color="tertiary">
          mdi-account
          </v-icon>

      </template>

      <v-card>
        <v-list>
          <v-list-tile avatar>
            <!-- <v-list-tile-avatar>
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" :alt="name">
            </v-list-tile-avatar> -->

            <v-list-tile-content>
              <v-list-tile-title>{{ name }}</v-list-tile-title>
              <v-list-tile-sub-title>{{ cell_number }}</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>

        <v-divider></v-divider>

        <v-list>
          <router-link
          class="toolbar-items"
          :to="{name: 'MyInfo'}"
        >
          <v-list-tile >
            <v-list-tile-title class="black--text" >My Info</v-list-tile-title>
          </v-list-tile>
        </router-link>


          <router-link
          class="toolbar-items"
          :to="{name: 'Tickets'}"
        >
          <v-list-tile >
            <v-list-tile-title class="black--text" >My Ticket</v-list-tile-title>
          </v-list-tile>
        </router-link>
        </v-list>
      </v-card>
    </v-menu>

        <v-menu
          bottom
          left
          content-class="dropdown-menu"
          offset-y
          transition="slide-y-transition">
          <v-card>
            <v-list dense>
              <v-list-tile
                v-for="notification in notifications"
                :key="notification"
                @click="onClick"
              >
                <v-list-tile-title
                  v-text="notification"
                />
              </v-list-tile>
            </v-list>
          </v-card>
        </v-menu>

        <v-badge  class="toolbar-items Pointer" @click.native="submitLogout" >
          <v-icon color="tertiary">input</v-icon>
        </v-badge>
      </v-flex>
    </v-toolbar-items>
  </v-toolbar>
</template>

<script>

import {
  mapMutations, mapActions
} from 'vuex'

export default {
  data: () => ({
    notifications: [
      'Mike, John responded to your email',
      'You have 5 new tasks',
      'You\'re now a friend with Andrew',
      'Another Notification',
      'Another One'
    ],
    title: null,
    responsive: false,
    responsiveInput: false,
    name: '',
    cell_number: '',
  }),

  watch: {
    '$route' (val) {
      // this.title = val.name
      this.title = val.name.replace(/([A-Z])/g, ' $1').trim()
    }
  },

  mounted () {
    this.onResponsiveInverted();
    window.addEventListener('resize', this.onResponsiveInverted);
    this.cell_number = this.$store.state.user.cell_number;
    this.name = this.$store.state.user.name;
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onResponsiveInverted)
  },

  methods: {
    ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
    ...mapActions('auth', ['logout']),
    onClickBtn () {
      this.setDrawer(!this.$store.state.app.drawer)
    },
    submitLogout () {
      this.logout();
    },
    onClick () {
      //
    },
    onResponsiveInverted () {
      if (window.innerWidth < 991) {
        this.responsive = true
        this.responsiveInput = false
      } else {
        this.responsive = false
        this.responsiveInput = true
      }
    }
  }
}
</script>

<style>
  #core-toolbar a {
    text-decoration: none;
  }
  .Pointer {
      cursor: pointer;
  }
</style>