AppBar.vue

<template>
  <div>
    <v-app-bar
      id="home-app-bar"
      app
      color="white"
      elevation="1"
      height="80"
    >
      <v-spacer />

      <!-- <div>
        <v-tabs
          class="hidden-sm-and-down"
          optional
        >
          <v-tab
            v-for="(name, i) in items"
            :key="i"
            :to="{ name }"
            :exact="name === 'Home'"
            :ripple="false"
            active-class="text--primary"
            class="font-weight-bold"
            min-width="96"
            text
          >
            {{ name }}
          </v-tab>
        </v-tabs>
      </div> -->

      <v-app-bar-nav-icon
        @click="showHideDrawer"
      />
      <v-menu
        offset-y
        max-width="200"
        min-width="200"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-bind="attrs"
            icon
            fab
            class=""
            v-on="on"
          >
            <v-tooltip
              bottom
              max-width="125"
              min-width="125"
              color="rgba(0,0,0, 0.8)"
            >
              <template v-slot:activator="{ on, attrs }">
                <v-icon
                  v-bind="attrs"
                  color="#2D89C5"
                  v-on="on"
                >
                  mdi-account
                </v-icon>
                <svg
                  viewBox="0 0 36 36"
                  height="12px"
                  width="12px"
                  role="img"
                  aria-hidden="true"
                  class="v-icon__svg langbtn"
                >
                  <path
                    fill="#2D89C5"
                    d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
                  />
                </svg>
              </template>
              <span class="tooltip">Usuario</span>
            </v-tooltip>
          </v-btn>
        </template>
        <v-lazy>
          <v-card>
            <v-list
              dense
              style="margin-left: 16px"
            >
              <v-list-item-title class="h3">
                <b>
                  {{ user.name }}
                </b>
              </v-list-item-title>
              <v-list-item-subtitle>{{ user.role }}</v-list-item-subtitle>
            </v-list>
            <v-list
              dense
            >
              <v-list-item
                v-for="item in globalActions"
                :key="item.title"
                @click="navigateProcesses(item.link)"
              >
                <v-list-item-avatar>
                  <v-avatar
                    fab
                  >
                    <v-icon color="#2D89C5">
                      {{ item.icon }}
                    </v-icon>
                  </v-avatar>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
            <v-list
              dense
            >
              <v-list-item
                v-for="item in globalActions"
                :key="item.title"
                @click="getMeOut"
              >
                <v-list-item-avatar>
                  <v-avatar
                    fab
                  >
                    <v-icon color="#2D89C5">
                      mdi-logout
                    </v-icon>
                  </v-avatar>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title>Cerrar Sesión</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card>
        </v-lazy>
      </v-menu>
    </v-app-bar>

    <!-- <home-drawer
      v-model="drawer"
      :items="items"
    /> -->
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'HomeAppBar',

    /* components: {
      HomeDrawer: () => import('./Drawer'),
    }, */

    data: () => ({
      globalActions: [
        { link: 'lol', title: 'Registrar Usuario', icon: 'mdi-account-plus' },
      ],
      items: [
        'Home',
        'About',
        'Contact',
        'Pro',
      ],
    }),
    computed: {
      ...mapGetters(['user']),
    },
    methods: {
      getMeOut () {
        console.log(this.user.name)
        /* this.clearUser()
        localStorage.commit('tkn', null)
        localStorage.commit('usr', null) */
        // Todo: SEND LOGOUT REQUEST
      },
      showHideDrawer () {
        this.$store.commit('setDrawer')
      },
    },
  }
</script>

<style lang="sass">
  #home-app-bar
    .v-tabs-slider
      max-width: 24px
      margin: 0 auto

    .v-tab
      &::before
        display: none
</style>