<template>
  <v-toolbar
    color="grey"
    fixed

    app
    >
    <!-- <v-toolbar-title class="ml-0 pl-3">
    <v-toolbar-side-icon @click.stop="handleDrawerToggle"></v-toolbar-side-icon>
    </v-toolbar-title> -->
      <!-- <v-text-field
        flat
        prepend-icon="search"
        label="Find your user"
        v-model="search"
        color="black"
        :search="search"
      >
      </v-text-field> -->
      <v-spacer></v-spacer>
     
      <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: '',
    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');
        }
      }
    ],
  }),
  computed: {
    toolbarColor () {
      return this.$vuetify.options.extra.mainNav;
    }
  },
  methods: {
    handleDrawerToggle () {
      window.getApp.$emit('APP_DRAWER_TOGGLED');
    },
    handleFullScreen () {
      Util.toggleFullScreen();
    }
  }
};
</script>
