93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<v-app-bar
|
||
|
|
color="yellow">
|
||
|
|
<v-app-bar-nav-icon v-if="user.logged_in" variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||
|
|
<v-toolbar-title>{{ site_info.name }}</v-toolbar-title>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-btn variant="text" v-if="user.logged_in">Hi {{ user.first_name }}</v-btn>
|
||
|
|
</v-app-bar>
|
||
|
|
<v-navigation-drawer
|
||
|
|
v-if="user.logged_in"
|
||
|
|
v-model="drawer"
|
||
|
|
theme="dark">
|
||
|
|
<v-list>
|
||
|
|
<template v-for="item in items" v-bind:key="item.title">
|
||
|
|
<template v-if="item.children">
|
||
|
|
<v-list-item :title="item.title">
|
||
|
|
<v-list>
|
||
|
|
<v-list-item v-for="citem in item.children"
|
||
|
|
v-bind:key="citem.title"
|
||
|
|
:title="citem.title"
|
||
|
|
:to="citem.value">
|
||
|
|
</v-list-item>
|
||
|
|
</v-list>
|
||
|
|
</v-list-item>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<v-list-item :title="item.title" :to="item.value">
|
||
|
|
</v-list-item>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</v-list>
|
||
|
|
</v-navigation-drawer>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default{
|
||
|
|
name: "MyNav",
|
||
|
|
props: {
|
||
|
|
site_info: {},
|
||
|
|
user: {
|
||
|
|
logged_in: false,
|
||
|
|
first_name: "null"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'user.logged_in'(isLoggedIn) {
|
||
|
|
if (isLoggedIn) {
|
||
|
|
this.items = this.get_menu()
|
||
|
|
} else {
|
||
|
|
this.items = []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
items: [],
|
||
|
|
drawer: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
if (window.location.pathname != "/login") {
|
||
|
|
this.items = this.get_menu()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
get_menu() {
|
||
|
|
let items = []
|
||
|
|
items.push({title: "Dashboard", value:"/about"})
|
||
|
|
items.push({title: "Customers",
|
||
|
|
value:"/customers",
|
||
|
|
children:[{title:"List",
|
||
|
|
value:"/customers/list"},
|
||
|
|
{title:"Contracts",
|
||
|
|
value:"/customers/contracts/list"},
|
||
|
|
{title:"Complaints",
|
||
|
|
value:"/customers/complaints/list"},
|
||
|
|
{title:"Medicated Feeds",
|
||
|
|
value:"/customers/medicated-feeds/list"}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
items.push({title: "Sales Orders",
|
||
|
|
value:"/sop",
|
||
|
|
children:[{title:"Printed",
|
||
|
|
value:"/sop/printed"}]
|
||
|
|
})
|
||
|
|
|
||
|
|
items.push({title: "Logout", value:"/logout"})
|
||
|
|
return items
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|