@BOBBYBOUWMANN - Seriously I am astonished. Why it is not working.!!
<template>
<v-toolbar
app
fixed
height="80px"
color="teal lighten-4"
clipped-left
>
<v-toolbar-side-icon
@click="changeDrawer"
></v-toolbar-side-icon>
<v-img :src="'img/logo1.png'"
height="50px"
width="250px"
></v-img>
<v-text-field
solo
append-icon="search"
label="Search for products (e.g. Honey, Tree etc) "
class="search-bar"
></v-text-field>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-menu offset-y>
<v-btn
color="green"
slot="activator"
>
<v-icon>expand_more</v-icon>
<span>Dropdown</span>
</v-btn>
<v-list>
<v-list-tile
v-for="(i, index) in menuDropDown"
:key="index"
@click=""
>
<v-list-tile-title>{{ i.title}}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar-items>
</v-toolbar>
</template>
<script>
import { eventBusForNavigation } from '../../../app.js'
export default {
data() {
return {
items: [
{
title: 'Products',
icon: 'shopping_basket',
to: '/products',
show: true
},
{
title: 'Contact',
icon: 'contacts',
to: '/contact',
show: true
},
{
title: 'About Us',
icon: 'business_center',
to: '/about',
show: true
},
{
title: 'Login',
icon: 'account_circle',
to: '/login',
show: !User.loggedIn()
},
// {
// title: User.name(),
// icon: 'account_circle',
// to: '/logout',
// show: User.loggedIn()
// }
],
drawer: true,
menuDropDown:
[
{ title: 'Your Profile' },
{ title: 'Your Orders' },
{ title: 'Change Password' },
{ title: 'Logout' }
],
notifications: [
'Mike, John responded to your email',
'You have 5 new tasks',
'You\'re now a friend with Andrew',
'Another Notification',
'Another One'
]
}
},
methods: {
changeDrawer()
{
this.drawer = !this.drawer;
eventBusForNavigation.$emit('drawerEdit', this.drawer);
}
}
}
</script>
<style scoped>
.search-bar>i
{
margin-left: 80px!important;
}
.v-toolbar__items .v-btn:not(.v-btn--floating):not(.v-btn--icon)
{
height: auto;
padding: 5px 10px;
text-transform: none;
color: white;
}
.v-toolbar__items
{
height: unset!important;
}
a
{
text-decoration: none;
}
.routerLink
{
margin-right: 10px;
}
.menuLink
{
margin-right: 5px;
}
.search-bar
{
width: 100%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 0px!important;
color: black;
}
.v-input__slot
{
margin-bottom: 0px!important;
}
</style>
<style>
.v-input__slot
{
margin-bottom: 0px!important;
}
.v-menu>.v-menu__content
{
display: block!important;
top: unset!important;
right: 5px;
left: unset!important;
}
</style>