Blame view
src/components/AppToolbar.vue
2.34 KB
93a68cfa1
|
1 2 |
<template> <v-toolbar |
8fc85e8ec
|
3 |
color="grey" |
93a68cfa1
|
4 5 6 7 |
fixed app > |
8fc85e8ec
|
8 |
<!-- <v-toolbar-title class="ml-0 pl-3"> |
93a68cfa1
|
9 |
<v-toolbar-side-icon @click.stop="handleDrawerToggle"></v-toolbar-side-icon> |
8fc85e8ec
|
10 |
</v-toolbar-title> --> |
4413a8d93
|
11 |
<!-- <v-text-field |
93a68cfa1
|
12 |
flat |
93a68cfa1
|
13 14 15 16 |
prepend-icon="search" label="Find your user" v-model="search" color="black" |
789f8298f
|
17 |
:search="search" |
93a68cfa1
|
18 |
> |
4413a8d93
|
19 |
</v-text-field> --> |
93a68cfa1
|
20 21 22 23 |
<v-spacer></v-spacer> <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> <v-btn icon large flat slot="activator"> |
269061695
|
24 25 |
<v-avatar size="40px"> <img src="/static/icon/user.png"/> |
789f8298f
|
26 |
|
93a68cfa1
|
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
</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 { 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> |