[Documentation] Navigation Drawer usage example does not work

[rramsey]

Environment

Vuetify Version: 3.5.2
Vue Version: 3.4.7
Browsers: Chrome 113.0.0.0
OS: Windows

Steps to reproduce

1. Visit https://vuetifyjs.com/en/components/navigation-drawers/#usage
2. Under the Usage paragraph, click Edit in Vuetify Playground icon

Expected Behavior

• I expect the initial Usage paragraph to give all of the basic information needed to reproduce the example.

• Failing that, I expect the Usage example to include all relevant information to recreate a bare bones component, in this case a Navigation Drawer.

• I expect the Vuetify playground to exactly duplicate the example as shown.

• I expect that copyng the code will copy the coded necessary to create a basic navigation drawer.

Actual Behavior

The playground is blank. The Navigation Draw does not display at all.

The playground does not include the width slider to change the width of the drawer.

The Usage paragraph does not mention the need to have the permanent property set. The Usage paragraph does not mention the apparent requirement to wrap the navigation drawer inside a v-app and v-container.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

It is incredibly frustrating to have the most basic examples fail when trying to learn about a framework or plugin. This is not the only case of the playground failing to reproduce the the basic usage example. And this is not the only case of the basic usage example failing to provide relevant information.

Here's a better paragraph:

The navigation drawer is primarily used to house links to the pages in your application and is pre-configured to work with or without vue-router right out the box. The v-navigation-draw must be wrapped inside a v-container, inside a v-app. Use the permanent property to display your drawer permanently. To toggle the drawer instead, bind a variable to :model (v-model) using null to hide the drawer and true to show it. Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.

The example code, the code that is copied when the copy code button is clicked, should at a minimum be:

<v-app>
    <v-container>
      <v-navigation-drawer permanent>
        <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
        <v-divider></v-divider>
        <v-list-item link title="List Item 1"></v-list-item>
        <v-list-item link title="List Item 2"></v-list-item>
        <v-list-item link title="List Item 3"></v-list-item>
      </v-navigation-drawer>
    </v-container>
  </v-app>

[MajesticPotatoe]

just some notes:

• The usage example does in fact work, its just that when you open it in browser, the viewport for the example is below the mobile breakpoint which put it into a hidden state (permanent isn't required, nor is v-container, v-app is technically a requirement for all Vuetify components which is why its always in the playground examples, you would normally have it at the root level of your application)
• Usage controls are only meant for being in the docs, and defeats the purpose of edit in playground to include it.
• Should probably include permanent as an option in the example and a caveat about it (though not sure theres any really a good way to showcase it as the usage doesn't really change width)