docs(VAppBar): add nav drawer toggle example

resolves #9147
vuetifyjs · Feb 4, 2020 · 38beecb · 38beecb
1 parent da7411a
commit 38beecb
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/packages/docs/src/data/pages/components/AppBars.json b/packages/docs/src/data/pages/components/AppBars.json
@@ -81,6 +81,7 @@
             "simple/collapse",
             "simple/elevate-on-scroll",
             "simple/inverted-scroll",
+            "intermediate/app-bar-nav",
             "intermediate/scroll-threshold",
             "complex/img-fade",
             "complex/menu"

diff --git a/packages/docs/src/examples/app-bars/intermediate/app-bar-nav.vue b/packages/docs/src/examples/app-bars/intermediate/app-bar-nav.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-card
+    class="mx-auto overflow-hidden"
+    height="400"
+  >
+    <v-app-bar
+      color="deep-purple"
+      dark
+    >
+      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
+
+      <v-toolbar-title>Title</v-toolbar-title>
+    </v-app-bar>
+
+    <v-navigation-drawer
+      v-model="drawer"
+      absolute
+      temporary
+    >
+      <v-list
+        nav
+        dense
+      >
+        <v-list-item-group
+          v-model="group"
+          active-class="deep-purple--text text--accent-4"
+        >
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon>mdi-home</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Home</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon>mdi-account</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Account</v-list-item-title>
+          </v-list-item>
+
+        </v-list-item-group>
+      </v-list>
+    </v-navigation-drawer>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      drawer: false,
+    }),
+  }
+</script>
diff --git a/packages/docs/src/lang/en/components/AppBars.json b/packages/docs/src/lang/en/components/AppBars.json
@@ -28,6 +28,10 @@
       "heading": "### Hiding on scroll",
       "desc": "`v-app-bar` can be hidden on scroll. Use the `hide-on-scroll` property for this."
     },
+    "app-bar-nav": {
+      "heading": "### Toggle Navigation Drawers",
+      "desc": "Using the functional component `v-app-bar-nav-icon` you can toggle the state of other components such as a [v-navigation-drawer](/components/navigation-drawer)."
+    },
     "scroll-threshold": {
       "heading": "### Scroll threshold",
       "desc": "`v-app-bar` can have scroll threshold. It will start reacting to scroll only after defined via `scroll-threshold` property amount of pixels."