Skip to content

K
kiaisoft_tuananh_nuxt
Commit 045cf310 authored by vieanh's avatar vieanh
Browse files
Options

fix admin navbar

parent 2862a9fb
Show whitespace changes
Inline Side-by-side
Showing with 75 additions and 43 deletions
components/Navbar.vue
View file @ 045cf310
<!-- eslint-disable vue/multi-word-component-names --> <!-- eslint-disable vue/multi-word-component-names -->
<template> <template>
<div> <div>
<v-toolbar <v-navigation-drawer
dark v-model="drawer"
prominent :mini-variant="miniVariant"
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg" :clipped="clipped"
fixed
app
> >
<v-app-bar-nav-icon /> <v-list>
<v-list-item
<v-toolbar-title> v-for="(item, i) in items"
<v-btn to="/users"> :key="i"
<span>USER</span> :to="item.to"
<v-icon dense> router
mdi-account exact
</v-icon> >
</v-btn> <v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
<v-btn to="/categories"> </v-list-item-action>
<span>CATEGORY</span> <v-list-item-content>
<v-icon dense> <v-list-item-title>{{ item.title }}</v-list-item-title>
mdi-heart </v-list-item-content>
</v-icon> </v-list-item>
</v-btn> </v-list>
</v-navigation-drawer>
<v-btn to="/products"> <v-app-bar
<span>PRODUCT</span> class="navbar"
<v-icon dense> :clipped-left="clipped"
mdi-briefcase fixed
</v-icon> app
</v-btn> >
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-btn to="/posts"> <v-btn
<span>POST</span> icon
<v-icon dense> @click.stop="miniVariant = !miniVariant"
mdi-newspaper >
</v-icon> <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
</v-btn>
<v-btn to="/home-page">
<span>HOME PAGE</span>
<v-icon dense>
mdi-home
</v-icon>
</v-btn> </v-btn>
<v-toolbar-title>
<router-link class="navbar-title" to="/home-page" target="_blank">
{{ title }}
</router-link>
</v-toolbar-title> </v-toolbar-title>
<v-spacer /> <v-spacer />
<v-toolbar-title class="profile"> <v-toolbar-title class="profile">
{{ $auth.$storage.getUniversal("userName") }} {{ $auth.$storage.getUniversal("userName") }}
</v-toolbar-title> </v-toolbar-title>
...@@ -82,11 +79,40 @@ ...@@ -82,11 +79,40 @@
</v-list> </v-list>
</v-menu> </v-menu>
</div> </div>
</v-toolbar> </v-app-bar>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
drawer: false,
items: [
{
icon: 'mdi-account',
title: 'User',
to: '/users'
},
{
icon: 'mdi-heart',
title: 'Categories',
to: '/categories'
},
{
icon: 'mdi-briefcase',
title: 'Products',
to: '/products'
},
{
icon: 'mdi-newspaper',
title: 'Posts',
to: '/posts'
}
],
miniVariant: false,
title: 'Homepage'
}
},
mounted () { mounted () {
console.log('123') console.log('123')
}, },
...@@ -124,4 +150,10 @@ export default { ...@@ -124,4 +150,10 @@ export default {
.v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child { .v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
margin-right: 15px; margin-right: 15px;
} }
.navbar {
background: url('https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg');
}
.navbar-title {
text-decoration: none;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment