93 lines
2.2 KiB
JavaScript
93 lines
2.2 KiB
JavaScript
var smartNavbarComponent = {
|
|
template: `
|
|
<span>
|
|
<v-navigation-drawer
|
|
v-model="drawer"
|
|
fixed
|
|
clipped
|
|
class="grey lighten-4"
|
|
app
|
|
>
|
|
<v-list
|
|
dense
|
|
class="grey lighten-4"
|
|
>
|
|
<template v-for="(item, i) in items">
|
|
<v-layout
|
|
v-if="item.heading"
|
|
:key="i"
|
|
row
|
|
align-center
|
|
>
|
|
<v-flex xs6>
|
|
<v-subheader v-if="item.heading">
|
|
{{ item.heading }}
|
|
</v-subheader>
|
|
</v-flex>
|
|
<v-flex xs6 class="text-xs-right">
|
|
<v-btn small flat>edit</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-divider
|
|
v-else-if="item.divider"
|
|
:key="i"
|
|
dark
|
|
class="my-3"
|
|
></v-divider>
|
|
<v-list-tile
|
|
v-else
|
|
:key="i"
|
|
@click=""
|
|
>
|
|
<v-list-tile-action>
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title class="grey--text">
|
|
{{ item.text }}
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</template>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
<v-toolbar color="amber" app absolute clipped-left>
|
|
<v-toolbar-side-icon @click.native="drawer = !drawer"></v-toolbar-side-icon>
|
|
<span class="title ml-3 mr-5">Google <span class="font-weight-light">Keep</span></span>
|
|
<v-text-field
|
|
solo-inverted
|
|
flat
|
|
hide-details
|
|
label="Search"
|
|
prepend-inner-icon="search"
|
|
></v-text-field>
|
|
<v-spacer></v-spacer>
|
|
</v-toolbar>
|
|
</span>
|
|
`,
|
|
data: function() {
|
|
return {
|
|
drawer: false,
|
|
items: [
|
|
{ icon: 'lightbulb_outline', text: 'Notes' },
|
|
{ icon: 'touch_app', text: 'Reminders' },
|
|
{ divider: true },
|
|
{ heading: 'Labels' },
|
|
{ icon: 'add', text: 'Create new label' },
|
|
{ divider: true },
|
|
{ icon: 'archive', text: 'Archive' },
|
|
{ icon: 'delete', text: 'Trash' },
|
|
{ divider: true },
|
|
{ icon: 'settings', text: 'Settings' },
|
|
{ icon: 'chat_bubble', text: 'Trash' },
|
|
{ icon: 'help', text: 'Help' },
|
|
{ icon: 'phonelink', text: 'App downloads' },
|
|
{ icon: 'keyboard', text: 'Keyboard shortcuts' }
|
|
]
|
|
};
|
|
},
|
|
methods: {}
|
|
};
|
|
|
|
export { smartNavbarComponent };
|