<template>

    <v-toolbar class="fixcolors" 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>

  
      <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->

      <v-flex xs7 sm3 class="userSearch" v-if="$route.name != 'Dashboard' && $route.name != 'changepassword'">

        <v-text-field
          flat
          append-icon="search"
          label="Seacrh"
          color="white"
          @input.native="emitSearch"
          type="text"
          dark
        ></v-text-field>
      </v-flex>
      <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 class="iconSize">{{ 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 Util from "@/util";

  export default {

    name: "app-toolbar",

    data: () => ({

      userName: "",

      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: 'lock',

          href: "#",
          title: "Logout",
          click: e => {
            window.getApp.$emit("APP_LOGOUT");

          }
        }

      ]

    }),
    computed: {

      toolbarColor() {

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

      emitSearch (ev) {
        this.$root.$emit('app:search', ev.target.value)

        console.log("ev.target.value",ev.target.value)

      },

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

      },

      handleFullScreen() {

        Util.toggleFullScreen();
      }

    }

  };
  </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>