cmc_fe/src/components/MyNav.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-divider></v-divider>
            <v-footer >
                <sub>{{ site_info.name }} v{{ site_info.version }}<br/>
                    cmc_fe: v{{ version }}
                </sub>
            </v-footer>
        </v-list>
    </v-navigation-drawer>
</template>
<script>
import {version} from '../package.json'
export default{
    name: "MyNav",
    props: {
        version: version,
        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>