Navbar.vue

<template>
    <nav>
        <v-app-bar app dark flat color="primary" extended v-if="isHome">
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title class="text-uppercase font-weight-light">{{appName}}</v-toolbar-title>

            <v-spacer></v-spacer>

            <!-- dropdown menu  -->


            <v-btn icon>
                <v-badge color="orange" overlap >
                    <template v-slot:badge v-if="count>0">
                        <span>{{count}}</span>
                    </template>
                <v-icon>
                    mdi-cart
                </v-icon>
                </v-badge>
            </v-btn>

            <v-text-field slot="extension" hide-details append-icon="mdi-microphone" flat label="Search" prepend-inner-icon="mdi-magnify" solo-inverted
            @click="setDialogComponent('Search')"></v-text-field>
        </v-app-bar>

        <v-app-bar app dark  color="primary" v-else>
            <v-btn icon @click="back()">
                <v-icon>mdi-arrow-left-circle</v-icon>
            </v-btn>
            <v-spacer></v-spacer>

            <!-- dropdown menu  -->


            <v-btn icon>
                <v-badge color="orange" overlap>
                    <template v-slot:badge v-if="count > 0">
                        <span>{{count}}</span>
                    </template>
                <v-icon>
                    mdi-cart
                </v-icon>
                </v-badge>
            </v-btn>

        </v-app-bar>

        <v-navigation-drawer app v-model="drawer">
            <!-- <v-btn icon dark @click="drawer = !drawer">
                <v-icon>
                    mdi-close
                </v-icon>

            </v-btn> -->

                <v-list>
                    <v-list-item v-if="!guest">

                    <v-list-item-avatar class="">
                        <v-img :src="getImage(user.avatar)"></v-img>
                    </v-list-item-avatar>
                        <v-list-item-content>
                            <v-list-item-title>{{user.name}}</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>

                    <v-list-item v-else>
                        <div class="pa-2 flex">
                            <v-btn block color="primary" class="mb-1" @click="setDialogComponent('Login')" >
                                <v-icon left >
                                    mdi-lock
                                </v-icon>
                                <span class="text-uppercase">
                                    Login
                                </span>
                            </v-btn>
                            <v-btn block color="success" class="mb-1">
                                <v-icon left>
                                    mdi-account
                                </v-icon>
                                <span class="text-uppercase">Register</span>
                            </v-btn>
                            </div>
                    </v-list-item>
                    <v-divider></v-divider>
                    <v-list-item  v-for="menu in menus" :key="menu.text" router :to="menu.route ">

                        <v-list-item-icon>
                            <v-icon>{{menu.icon}}</v-icon>
                        </v-list-item-icon>
                        <v-list-item-content>
                            <v-list-item-title>{{menu.text}}</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list>
                    <template v-slot:append v-if="!guest">
                    <div class="pa-2">
                    <v-btn block color="red" dark @click="logout">
                    <v-icon left >mdi-lock</v-icon>
                    Logout
                    </v-btn>
                    </div>
                    </template>

        </v-navigation-drawer>
    </nav>
</template>

<script>
import { mapGetters,mapActions } from 'vuex';
import Axios from 'axios';

    export default {
        name : 'Navbar',
        data() {
            return {
                drawer : false,
                menus : [
                    {icon:'mdi-home', text :'Home', route:'/'},
                    {icon:'mdi-folder', text :'My Project', route:'/projects'},
                    {icon:'mdi-account', text :'Team', route:'/team'},
                ],
            }
        },
        computed : {
            isHome(){
            return (this.$route.path === '/');
            },
            ...mapGetters({
                count : 'cart/count',
                user  : 'auth/user',
                guest : 'auth/guest',
                dialogStatus : 'dialog/status',
                currentComponent : 'dialog/component',
            }),
            dialog : {
                get() {
                    return this.dialogStatus
                },
                set(value) {
                    this.setDialogStatus(value)
                }
            }
        },
        methods : {
            back(){
            this.$router.go(-1);
            },
            ...mapActions({
                setDialogStatus : 'dialog/setStatus',
                setDialogComponent : 'dialog/setComponent',
            }),
            logout(){
                let config = {
                    headers : {
                        'Authorization':'Bearer' + this.user.api_token,
                    },
                }
                let url = 'http://localhost:8000/api/v1/logout'
                Axios.post(url,{},config)
                .then(response => {
                    this.setAuth({})
                    this.setAlert({
                        status : true,
                        color : 'success',
                        text : response,
                    })
                    .catch(error => {
                    console.log(this.user)
                    console.log(config.headers)
                        let {data} = error.response
                        this.setAlert({
                            status : true,
                            color:'error',
                            text : data
                        })
                    })
                })
            }
        }
    }
</script>