AppDrawer.vue

<template>
    <v-navigation-drawer
        id="appDrawer"
        v-model="drawer"
        :clipped="$vuetify.breakpoint.lgAndUp"
        fixed
        app
    >
        <v-list dense expand>
            <template v-for="(item, i) in menus">
                <v-layout v-if="item.header" :key="i" row align-center>
                    <v-flex xs6>
                        <v-subheader v-if="item.header">
                            {{ item.header }}
                        </v-subheader>
                    </v-flex>
                </v-layout>
                <v-divider v-else-if="item.divider" :key="i" dark class="my-3" />
                <v-list-tile
                    v-else
                    :key="i"
                    :to="!item.href ? { name: item.name } : null"
                    class="v-list-item"

                    router
                    exact
                >
                    <v-list-tile-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-tile-action>

                    <v-list-tile-content>
                        <v-list-tile-title
                            class="grey--text"
                        >
                            {{ item.title }}
                        </v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </template>
        </v-list>
    </v-navigation-drawer>
</template>

<script>
    import menu from '@/utils/menu';

    export default {

        components: {

        },
        props: {
            expanded: {
                type: Boolean,
                default: true,
            },
        },

        data() {
            return {
                drawer: null,
                mini: false,
                menus: menu,
                scrollSettings: {
                    maxScrollbarLength: 160,
                },

            };
        },
        computed: {
            me() {
                return this.$store.getters.currentUser;
                // return this.$store.state.auth.me;
            },
        },
        created() {
            this.$bus.$on('APP_DRAWER_TOGGLED', () => {
                this.drawer = (!this.drawer);
            });
        },
    };
</script>
<style scoped>
.list__tile--active .list__tile__action,
.list__tile--active .list__tile__action .icon {
color: blueviolet;
}

</style>