Vuetify: [Documentation] Show an example of v-app-bar working with mobile devices

[alexramsey92]

Problem to solve

All examples in 2.x show v-app-bar only in desktop scenarios. There is no working example of how this might work on a mobile phone. V-app-bar-nav-icon seems to do nothing but be an icon with a click animation.

Proposed solution

Provide a simple navbar with a collapse menu that works well for phones and looks good on a desktop.

[alexramsey92]

Imma just go back to using bootstrap...I can't spend an hour fighting with a navbar. GRrr. Help!

And, for some reason my v-app-nav-bar-nav-icon (phew) doesn't appear on mobile but I have the following cdn loaded in:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">

And, I have the following in my vuetify.js config:
icons: {
iconfont: 'mdi',
},

There's so many things I'm doing wrong that my head is spinning.

[alexramsey92]

Ok, I think I've got a decent navbar working now:

<v-navigation-drawer v-model="sidebar" app>
  <v-list>
    <v-list-item v-for="item in menuItems" :key="item.title" :to="item.path">
      <v-list-item-action>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-item-action>
      <v-list-item-content>{{ item.title }}</v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

<v-app-bar app>
  <span class="hidden-sm-and-up">
    <v-app-bar-nav-icon @click="sidebar = !sidebar"></v-app-bar-nav-icon>
  </span>
  <v-toolbar-title>
    <router-link to="/" tag="span" style="cursor: pointer">
      <img
        src="@/assets/logo.png"
        alt="RTS ENVIRONMENTAL SERVICES, INC."
        class="mt-8 hidden-sm-and-down"
      />
      <img
        src="@/assets/logo.png"
        alt="RTS ENVIRONMENTAL SERVICES, INC."
        class="mt-1 hidden-md-and-up"
        height="50px"
      />
    </router-link>
  </v-toolbar-title>
  <v-spacer></v-spacer>
  <v-toolbar-items class="hidden-xs-only">
    <v-btn text v-for="item in menuItems" :key="item.title" :to="item.path">
      <!-- <v-icon left dark>{{ item.icon }}</v-icon> -->
      {{ item.title }}
    </v-btn>
  </v-toolbar-items>
</v-app-bar>

[MajesticPotatoe]

Could you provide a little more clarity on your request. It sounds more like asking for a better example of mobile navigation drawers? v-app-bar-nav-icon by default doesn't have any functionality. Its a common positioned hamburger icon used in toolbars, more often to toggle a nav drawer. rather mobile independent. There are set plans to expand usage and definitions for these sub-components in the works.

[cristian-ciobanu]

Can an example using the v-app-bar-nav-icon be added to documentation regarding how to collapse a full v-navigation-drawer to a mini-variant and restore it back ?