cmc_fe/src/components/MyNav.vue

93 lines
2.8 KiB
Vue
Raw Normal View History

2023-01-19 13:44:49 +01:00
<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>