Base.vue

<script>
    import {mapGetters, mapState, mapMutations} from 'vuex'
    export default {
        name: "Base",
        computed: {
            ...mapGetters('menus', {
                leftItems: 'left',
                rightItems: 'right',
            }),
            ...mapState('menus', {
                left: state => state.left.active,
                right: state => state.right.active,
            }),
        },
        methods:{
            ...mapMutations('menus', [
                'toggle',
            ])
        }
    }
</script>
<template>
    <div id="container">
        <header id="header">
            <nav id="top-nav">
                <ul class="flex flex-shrink">
                    <li class="mr-2">
                        <button @click.prevent="toggle('left')">
                            <i class="fa fa-2x fa-cubes text-blue-600"></i>
                        </button>
                    </li>
                </ul>
                <a id="brand" href="/">
                    <span>Provisioner</span><span>App</span>
                </a>
                <ul class="flex flex-grow justify-end">
<!--                    <li class="ml-2">-->
<!--                        <v-connection></v-connection>-->
<!--                    </li>-->
                    <li class="ml-2">
                        <button
                            @click.prevent="toggle('right')"
                            class="btn btn-sm font-thin rounded-full bg-gray-600 p-2">
                            <i class="fa fa-user-circle"></i>
                            <span class="hidden md:inline">
                                account name
                            </span>
                        </button>
                    </li>
                </ul>
            </nav>
        </header>
        <section id="content">
            <v-sidebar v-model="left" side="left">
                <router-link
                    :to="item.route"
                    v-for="(item, index) in leftItems"
                    :key="`left-${index}`"
                    class="sidebar-link">
                    <i class="fa" :class="item.icon"></i>
                    {{ item.label }}
                </router-link>
            </v-sidebar>
            <main id="main">
                <router-view></router-view>
            </main>
            <v-sidebar v-model="right" side="right" :pinned="true">
                <router-link
                    :to="item.route"
                    v-for="(item, index) in rightItems"
                    :key="`left-${index}`"
                    class="sidebar-link">
                    <i class="fa" :class="item.icon"></i>
                    {{ item.label }}
                </router-link>
            </v-sidebar>
        </section>
        <footer id="footer">
            <p>© Copyright 2019 Provisioner All Rights Reserved.</p>
        </footer>
    </div>
</template>