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-menu>
            <template v-slot:activator="{ props }">
                <v-btn 
                    variant="text" 
                    v-if="user.logged_in" 
                    v-bind="props">
                    Hi {{ user.first_name }}
                </v-btn>
            </template>
            <v-list theme="dark">
                <v-list-item
                        v-for="(item, index) in user_items"
                        :key="index"
                        :title="item.title"
                        :to="item.value"
                        >
                </v-list-item>
            </v-list>
        </v-menu>
    </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 }}</sub>
            </v-footer>
        </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 = []
            }
        }
    },
    computed: {
        user_items() {
            return this.items.filter(x => x.isUserMgmt == true) 
        }
    },
    data(){
        return {
            items: [],
            drawer: null,
            drawer2: false
        }
    },
    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", isUserMgmt: true})
            return items
        }
    }
}
</script>