<template>
  <span>
  <one-menu-drawer :drawer="drawer" > </one-menu-drawer>
  <v-toolbar color="blue lighten-2" dark fixed app>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <h1>ONE</h1>
     <v-spacer></v-spacer>

    <a href="#" style="text-decoration:none;color:#fff;font-size:22px; margin-right:15px">{{xusername}}</a>
    <v-badge color="red">
      <template v-slot:badge>
        <span>9</span>
      </template>
      <v-icon
        medium

      >
        notifications
      </v-icon>
    </v-badge>
     <v-btn class="ml-4" icon>
      <v-icon>apps</v-icon>
    </v-btn>
  </v-toolbar>
</template>
<style scoped>
.v-badge__badge{
  top:-9px;
  right:-9px;
}
</style>
<script>
module.exports = {
  components: {
    'one-menu-drawer' : httpVueLoader('./oneMenuDrawerGlobal.vue')
  },
  data: function() {
	return {
		drawer: false
	}
  },
  computed: {
      xusername() {
          var un = ''
          if(localStorage.getItem("user")){
            var retrievedObject = localStorage.getItem('user')
            var dtuser = JSON.parse(retrievedObject)
            un = dtuser.M_UserUsername
          }
          return un
      }
  }
}
</script>
