<template>
    <v-toolbar

      color="grey"

      fixed

      app

    >

      <v-toolbar-title class="ml-0 pl-3">
      <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
      </v-toolbar-title>

      <!-- <v-flex xs3>
        <v-text-field

          flat

          prepend-icon="search"
          label="Find your user"
          v-model="search"
          color="black"

          :search="search"

        >

        </v-text-field>
      </v-flex> -->

        <v-spacer></v-spacer>

        <h5 class="white--text name">{{userName}}</h5>

        <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
       <v-btn icon large flat slot="activator">

            <v-avatar size="40px">
             <img src="/static/icon/user.png"/>

            </v-avatar>
        </v-btn>
          <v-list class="pa-0">
            <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
               <v-list-tile-action v-if="item.icon">
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list> 
        </v-menu>
    </v-toolbar>
  </template>
  <script>

  import NotificationList from "@/components/widgets/list/NotificationList";
  import Util from "@/util";

  export default {

    search: "",
    name: "app-toolbar",

    components: {
      NotificationList
    },
    data: () => ({

      search: "",

      userName:'',

      items: [
        {
          // icon: 'account_circle',

          href: "/changepassword",
          title: "Change Password",
          click: e => {

            console.log(e);
          }
        },
        // {
        //   icon: 'settings',
        //   href: '#',
        //   title: 'Settings',
        //   click: (e) => {
        //     console.log(e);
        //   }
        // },
        {
          // icon: 'fullscreen_exit',

          href: "#",
          title: "Logout",
          click: e => {
            window.getApp.$emit("APP_LOGOUT");
         //   this.$store.dispatch("setToken", null);

          }
        }

      ]

    }),
    computed: {

      toolbarColor() {

        return this.$vuetify.options.extra.mainNav;
      }
    },
    methods: {

      handleDrawerToggle() {
        window.getApp.$emit("APP_DRAWER_TOGGLED");

      },

      handleFullScreen() {

        Util.toggleFullScreen();
      }

    }, 

    mounted(){

    this.userName = this.$store.state.name;
  }

  };
  </script>

  <style>
  .v-icon{
    font-size:30px;
  }
  @media screen and (min-width: 1270px){
  .hide{
    display: none;
  }

  /* }
  @media screen and (max-width: 962px) {
  .imglogo{

      position: absolute;
      top: 13px;
      left: 13px !important;
      width: 70px;
      height: 24px;

  } */

  }

  @media screen and (max-width: 420px){

  .v-list__tile {
    font-size:14px;
    padding: 0 10px;
  }

  .name{
    font-size:15px; 
  }

  }
  </style>