willaengine/resources/js/Authentication/components/TestMenu.vue

<template>
    <v-layout wrap>
        <v-container>
            <v-icon class="Menu" @click.stop="drawer = !drawer" dark>fas fa-bars</v-icon>
        </v-container>

        <v-navigation-drawer v-model="drawer" app temporary right>
            <v-list class="pa-1">
                <v-list-tile avatar>
                    <v-list-tile-avatar>
                        <img src="https://randomuser.me/api/portraits/men/85.jpg">
                    </v-list-tile-avatar>

                    <v-list-tile-content>
                        <v-list-tile-title>John Leider</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>

            <v-list class="pt-0" dense>
                <v-divider></v-divider>

                <v-list-tile v-for="item in items" :key="item.title">
                    <v-list-tile-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-tile-action>

                    <v-list-tile-content>
                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
        </v-navigation-drawer>
    </v-layout>
</template>

<script>
export default {
    data() {
        return {
            drawer: false,
            items: [
                { title: 'Home', icon: 'dashboard' },
                { title: 'About', icon: 'question_answer' }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.Menu {
    position: absolute;
    right: 20px;
    top: 20px;
}
.drawer-trigger {
    position: fixed;
    top: 0px;
    padding: 40px;
    background-color: white;
    left: 400px;
}

.drawer-trigger.active {
    color: red;
}

.drawer {
    position: fixed;
    top: 0px;
    left: -400px;
    bottom: 0px;
    background-color: white;
    width: 400px;
}

.drawer.open {
    left: 0px;
}
</style>