App.vue

<template>
    <v-app>
        <v-navigation-drawer fixed :clipped="$vuetify.breakpoint.mdAndUp" app width="200" :mini-variant=mini
                             v-model="drawer" class="elevation-5">
            <v-list dense>
                <template v-for="item in items">
                    <v-layout
                            row
                            v-if="item.heading"
                            align-center
                            :key="item.heading"
                    >
                        <v-flex xs6>
                            <v-subheader v-if="item.heading">
                                {{ item.heading }}
                            </v-subheader>
                        </v-flex>
                        <v-flex xs6 class="text-xs-center">
                            <a href="#!" class="body-2 black--text">EDIT</a>
                        </v-flex>
                    </v-layout>
                    <v-list-group
                            v-else-if="item.children"
                            v-model="item.model"
                            :key="item.text"
                            :prepend-icon="item.model ? item.icon : item['icon-alt']"
                            append-icon=""
                    >
                        <v-list-tile slot="activator">
                            <v-list-tile-content>
                                <v-list-tile-title>
                                    {{ item.text }}
                                </v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                        <v-list-tile
                                v-for="(child, i) in item.children"
                                :key="i"
                                @click="" :to="child.to"
                        >
                            <v-list-tile-action v-if="child.icon">
                                <v-icon>{{ child.icon }}</v-icon>
                            </v-list-tile-action>
                            <v-list-tile-content>
                                <v-list-tile-title>
                                    {{ child.text }}
                                </v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                    </v-list-group>
                    <v-list-tile :to="item.to" v-else @click="" :key="item.text">
                        <v-list-tile-action>
                            <v-icon>{{ item.icon }}</v-icon>
                        </v-list-tile-action>
                        <v-list-tile-content>
                            <v-list-tile-title>
                                {{ item.text }}
                            </v-list-tile-title>
                        </v-list-tile-content>
                    </v-list-tile>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar color="blue darken-3" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed class="elevation-6">
            <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
                <v-toolbar-side-icon show=false @click.stop="drawer = !drawer"></v-toolbar-side-icon>
                <v-btn icon @click.stop="mini = !mini">
                    <v-icon v-html="mini ? 'chevron_right' : 'chevron_left'"></v-icon>
                </v-btn>
                <span class="hidden-sm-and-down">MLS IT DEPT.</span>
            </v-toolbar-title>
        </v-toolbar>
        <v-content>
            <router-view></router-view>
        </v-content>
        <v-footer class="pa-3">
            <v-spacer></v-spacer>
            <div>&copy; {{ new Date().getFullYear() }}</div>
        </v-footer>
    </v-app>
</template>

<script>
    export default {
        data: () => ({
            dialog: false,
            drawer: null,
            mini: false,
            items: [{
                icon: 'mdi-home',
                text: 'Home',
                to: '/'
            },
                {
                    icon: 'mdi-account-multiple',
                    text: 'Our Team',
                    to: '/team'
                },
                {
                    icon: 'mdi-chevron-up',
                    'icon-alt': 'mdi-chevron-down',
                    text: 'Software',
                    model: true,
                    children: [{
                        icon: 'mdi-ticket',
                        text: 'Help Desk',
                        to: '/software/help-desk'
                    },
                        {
                            icon: 'mdi-heart-pulse',
                            text: 'Computer Monitor',
                            to: '/software/computer-monitor'
                        }
                    ]
                },
            ]
        }),
        props: {
            source: String
        }
    }
</script>