How to put navigation-drawer under app-bar for mobile in vuetify?

Question

Desktop Mode Image

Mobile Mode Image

The "clipped" option works fine in desktop mode.

However, in mobile mode, menu items are hidden by the app-bar. ("Dashboard" item is hidden.)

How can I put the navigation-drawer under the app-bar even in mobile mode?

My Source:

<template>
  <v-app>
    <v-app-bar app color="primary" dark clipped-left>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Title</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer app v-model="drawer" absolute clipped>
      <v-list nav>
        <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-main> </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data: () => ({
    drawer: null,
    items: [
          { title: 'Dashboard', icon: 'mdi-view-dashboard' },
          { title: 'Photos', icon: 'mdi-image' },
          { title: 'About', icon: 'mdi-help-box' },
        ]
  }),
};
</script>

Answer 1

This worked for me.

<v-app id="inspire">
   <v-overlay
      :value="drawer"
      z-index="4"
    >
    </v-overlay>
    <v-navigation-drawer
      v-model="drawer"
      app
      clipped
      hide-overlay
      :style="{ top: $vuetify.application.top + 'px', zIndex: 4 }"
    >
    </v-navigation-drawer>

    <v-app-bar
      app
      clipped-left
      dark
      color="#447fa6"
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
</v-app>

Codepen

Answer 2

Below code worked for me.

<v-app-bar app clipped-left>
  <v-app-bar-nav-icon v-if="!permanent" @click.stop="drawer = !drawer" />
  <v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
  v-model="drawer"
  :permanent="permanent"
  expand-on-hover
  clipped
  app
>
...
</v-navigation-drawer>

I am able to do what I want using this link Vuetify 2 toolbar ans 1 navigation drawer with 1 toolbar above the navigation drawer