[Documentation] Rightside Navigation Drawer on same level as app bar

[derHodrig]

Problem to solve

Imagine a design like:
navigation drawer | app bar | navigation drawer

In vuetify 2 it was possible via clipped left and clipped right on app bar I think. In vuetify 3 this is not possible this way.
Navigation Drawers have the location property.
Okay lets assume you have the following code

<template>
  <v-app>
    <v-navigation-drawer>
      <div class="text-center px-2 pt-2">Left Drawer</div>
    </v-navigation-drawer>

    <v-app-bar title="App Bar" />

    <v-navigation-drawer location="right">
      <div class="text-center px-2 pt-2">Right Drawer</div>
    </v-navigation-drawer>
  </v-app>
</template>

This is not the expected design. For me that felt the natural way of doing it. So i tried many workarounds with manipulating styles and so on but non worked.

The solution is simple...

<template>
  <v-app>
    <v-navigation-drawer>
      <div class="text-center px-2 pt-2">Left Drawer</div>
    </v-navigation-drawer>

    <!-- Put the right drawer BEFORE the app bar -->
    <v-navigation-drawer location="right">
      <div class="text-center px-2 pt-2">Right Drawer</div>
    </v-navigation-drawer>

    <v-app-bar title="App Bar" />
  </v-app>
</template>

That will result in the expected design

Proposed solution

My Request is to put exactly this solution as on of the examples in the navigation drawer docs page and/ or in the wireframes documentation. I saw on discord some others also struggle with that issue.

This will solve #19809

https://play.vuetifyjs.com/#eNrNUj1PAzEM/SsmMyZSR3RUAjEysXIMJuf2IuVyUc65FiH+O25aPgY6tFMXy5bt9/ys9/JhpuzsfUo3c2FzaxrhIQUSXrYRoJmRUqppLSLNfk3ix4hdpg3nQ0ubnZ/BBZqmu9YIbwUdR+EMaYsLSIKL1iyfeCXwWBcbqwvfwPZ/5OO0EEZXayXLft2Lgp90yfNu6ZxT9B34RhnES2Al0M/BA+XWgP0du0KEEt04DMoMfgXvY4ENaV6PhYOIEjvOkb30ID2DQoNC/+i4BN27HuLeCzqyN0Nj/5jEfF7HEkINr18SVMSS

[KaelWD]

https://vuetifyjs.com/en/features/application-layout/#dynamic-layouts-and-order

[derHodrig]

https://vuetifyjs.com/en/features/application-layout/#dynamic-layouts-and-order

yeah you are right. Could we adjust the example there, with the right navdrawer? Just to make it clear as possible?

https://play.vuetifyjs.com/#eNqVULsOwjAM/BUrMyECNlSQQIxMrJQhtKZECmmUuqUS4t8xKY8OMHSJ7NzZd+f9TVQhUyvvx02NYi4Swou3mnCZOoCkkdr7WMbG6cYUmkzpZB70FQOUIcewSMUkFS8aE3PTQGZ1VTFA2JLM0BGTfSun4ElOmbzFE8EmLkkUD7xF1A8Vxj4W2I886q/wLBVAhixyzTFgrQP/qP7If9dsBGyZRYzbYIozDQ2yew4NSNIh3VkT1Tu3uI9cbW18Dg89X4cb

the vPlay link shows the setup