Vuetify像移动应用一样打开导航抽屉

Question

如果您将窗口调整为移动视图大小，则可以通过单击它来查看侧面图标以切换我的抽屉。 vuetify的默认抽屉非常好，但是我想像在移动应用程序中一样打开它。

如何打开抽屉并跟随鼠标或手指？如果您看不到我的意思，那么聚合物演示就可以了。 https://shop.polymer-project.org/，您可以从左向右切换，也可以在鼠标按下时控制抽屉。

这是我的代码和一个密码笔：

<div id="app">
  <v-app>

    <v-toolbar app class="menu-shadow" color="white" height="64">
      <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title class="text-uppercase ">
        <span class="font-weight-light">My </span>
        <span class="primary--text">App</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <v-toolbar-items v-for="link in links" :key="link.text" class="hidden-sm-and-down">
        <v-btn flat :to="link.route">{{ link.text }}</v-btn>
      </v-toolbar-items>

      <v-btn flat color="grey">
        <span>Sign Out</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

      <v-navigation-drawer app v-model="drawer" app disable-resize-watcher class="primary">
      <v-layout column align-center>
        <v-flex class="mt-5">
          <v-avatar size="100">
            <img src="/avatar-1.png" alt="">
          </v-avatar>

        </v-flex>
      </v-layout>

      <v-list>
        <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
          <v-list-tile-action>
            <v-icon class="white--text">{{ link.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title class="white--text">{{ link.text }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>


    <v-content>
      <v-container grid-list-xl>

      </v-container>
    </v-content>
  </v-app>
</div>

https://codepen.io/anon/pen/qLvRgj