Code from YouTube Video, "Add Navigation Drawer to Toolbar in SharePoint Online" https://youtu.be/kt0DNfht_nc

toolbar.html

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" type="text/css"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />

<script src="https://cdn.jsdelivr.net/npm/babel-regenerator-runtime@6.5.0/runtime.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.js"></script>

<style>
  /*Hide quick launch*/
  #sideNavBox {
    DISPLAY: none
  }

  #contentBox {
    MARGIN-LEFT: 5px
  }

  div#s4-titlerow {
    DISPLAY: none !important;
  }
</style>
<div id="app">
  <v-app id="inspire">
    <v-card color="grey lighten-1" flat height="50px" tile>
      <v-toolbar dense color="indigo darken-1">
        <v-app-bar-nav-icon color="white" @click="drawer = !drawer"></v-app-bar-nav-icon>

        <v-toolbar-title class="white--text">Title</v-toolbar-title>

        <v-btn icon>
          <v-icon color="white">search</v-icon>
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon color="white">favorite</v-icon>
        </v-btn>
        <v-btn v-on:click="push">
          <v-icon>fab fa-angellist</v-icon>
        </v-btn>
        <v-btn icon color="white">
          <v-icon>more_vert</v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>

    <v-navigation-drawer v-model="drawer">
      <v-list dense rounded>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</div>
<script type="text/javascript" src="/sites/demos/mdemos/webpart/toolbar/toolbar.js"></script>

toolbar.js

document.getElementById("RibbonContainer").style.display = "none";
document.getElementById("s4-ribbonrow").style.display = "none";
document.getElementById("suiteBarTop").style.display = "none";
document.getElementById("DeltaSiteLogo").style.display = "none";
document.querySelector("[title=toolbar").style.display = "none";

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    items: [
      { title: "Dashboard", icon: "mdi-view-dashboard" },
      { title: "Admin", icon: "mdi-image" },
      { title: "About", icon: "mdi-help-box" }
    ],
    drawer: false
  },
  methods: {
    push: function () {
      alert("Peace to all!! do something");
    }
  }
});