Vuetify Set Toolbar and navigation drawer simultaneously

Question

I want to set navigation drawer alone with toolbar and toggle drawer from toolbar.

Code:

<v-navigation-drawer absolute temporary left v-model="drawer">
      <v-list-item-title class="text-h6">&nbsp;</v-list-item-title>
      <v-list nav dense>
        <div v-for="(link, i) in links" :key="i">
          <v-list-item v-if="!link.subLinks" :to="link.to" class="v-list-item">
            <v-list-item-icon>
              <v-icon>{{ link.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-title v-text="link.text" class="subtitle-2" />
          </v-list-item>

          <v-list-group
            v-else
            :key="link.text"
            no-action
            :prepend-icon="link.icon"
            :value="false"
          >
            <template v-slot:activator>
              <v-list-item-title>{{ link.text }}</v-list-item-title>
            </template>

            <v-list-item
              v-for="sublink in link.subLinks"
              :to="sublink.to"
              :key="sublink.text"
            >
              <v-list-item-icon>
                <v-icon>{{ sublink.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="subtitle-2">{{ sublink.text }}</v-list-item-title>
            </v-list-item>
          </v-list-group>
        </div> 
    </v-list>   
 </v-navigation-drawer> 
<v-toolbar color="primary" right @click.stop="drawer = !drawer">
  <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  <v-spacer></v-spacer>
</v-toolbar>

As you can see I have set both navigation-drawer and toolbar.

Currently:

Expected:

Answer 1

1. Replace the v-toolbar with v-app-bar
2. Add app clipped-left props to v-app-bar
3. Remove absolute temporary props from the drawer
4. Add app clipped fixed props to the drawer