component.js

<template>
    <nav>
        <v-navigation-drawer
            v-model="drawer"
            bottom
            clipped
            app
        ></v-navigation-drawer>
        <v-toolbar dark app>
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title class="text-uppercase font-weight-thin"
                >Beenerds
                <span class="font-weight-bold">Guild</span></v-toolbar-title
            >
            <v-spacer></v-spacer>
            <v-btn fab x-small class="deep-orange mr-2" darken-4>
                <v-icon>mdi-email</v-icon>
            </v-btn>
            <v-btn fab x-small class="deep-orange mr-5" darken-4>
                <v-icon>mdi-calendar</v-icon>
            </v-btn>
            <v-avatar size="48">
                <img
                    src="https://media.mmo-champion.com/images/news/2018/february/WoWIcon22.jpg"
                    alt="alt"
                />
                <v-icon>mdi-chevron-down</v-icon>
            </v-avatar>
        </v-toolbar>
    </nav>
</template>

<script>
export default {
    name: 'Navbar',
    data: function() {
        return {
            drawer: false
        };
    }
};
</script>