Created
December 4, 2017 10:00
-
-
Save Maxhodges/5857417b34374e31cb524f20f4f6c79a to your computer and use it in GitHub Desktop.
dynamic items for navigation drawer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <html> | |
| <head> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"/> | |
| <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <v-app id="inspire" dark> | |
| <v-navigation-drawer | |
| clipped | |
| fixed | |
| v-model="drawer" | |
| app | |
| > | |
| <v-list dense> | |
| <v-list-group v-for="item in items" :value="item.active" v-bind:key="item.title"> | |
| <v-list-tile slot="item" @click=""> | |
| <v-list-tile-action> | |
| <v-icon>{{ item.action }}</v-icon> | |
| </v-list-tile-action> | |
| <v-list-tile-content> | |
| <v-list-tile-title>{{ item.title }}</v-list-tile-title> | |
| </v-list-tile-content> | |
| <v-list-tile-action> | |
| <v-icon>keyboard_arrow_down</v-icon> | |
| </v-list-tile-action> | |
| </v-list-tile> | |
| <v-list-tile v-for="subItem in item.items" v-bind:key="subItem.title" @click=""> | |
| <v-list-tile-content> | |
| <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> | |
| </v-list-tile-content> | |
| <v-list-tile-action> | |
| <v-icon>{{ subItem.action }}</v-icon> | |
| </v-list-tile-action> | |
| </v-list-tile> | |
| </v-list-group> | |
| </v-list> | |
| </v-navigation-drawer> | |
| <v-toolbar app fixed clipped-left> | |
| <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon> | |
| <v-toolbar-title>Application</v-toolbar-title> | |
| </v-toolbar> | |
| <v-content> | |
| <v-container grid-list-md text-xs-center> | |
| <v-layout row wrap> | |
| <v-flex xs12> | |
| <v-card dark color="primary"> | |
| <v-card-text class="px-0"><slot/></v-card-text> | |
| </v-card> | |
| </v-flex> | |
| </v-layout></v-container> | |
| <v-container fluid fill-height> | |
| <v-layout justify-center align-center> | |
| <v-tooltip right> | |
| <v-btn icon large :href="source" target="_blank" slot="activator"> | |
| <v-icon large>code</v-icon> | |
| </v-btn> | |
| <span>Source</span> | |
| </v-tooltip> | |
| </v-layout> | |
| </v-container> | |
| </v-content> | |
| <v-footer app fixed> | |
| <span>© 2017</span> | |
| </v-footer> | |
| </v-app> | |
| </div> | |
| </body> | |
| </html> | |
| </template> | |
| <script> | |
| import Vue from "vue"; | |
| new Vue({ | |
| el: "#app", | |
| data() { | |
| return { | |
| items: [ | |
| { | |
| action: "local_activity", | |
| title: "Attractions", | |
| items: [{ title: "List Item" }] | |
| }, | |
| { | |
| action: "restaurant", | |
| title: "Dining", | |
| active: true, | |
| items: [ | |
| { title: "Breakfast & brunch" }, | |
| { title: "New American" }, | |
| { title: "Sushi" } | |
| ] | |
| }, | |
| { | |
| action: "school", | |
| title: "Education", | |
| items: [{ title: "List Item" }] | |
| }, | |
| { | |
| action: "directions_run", | |
| title: "Family", | |
| items: [{ title: "List Item" }] | |
| }, | |
| { | |
| action: "healing", | |
| title: "Health", | |
| items: [{ title: "List Item" }] | |
| }, | |
| { | |
| action: "content_cut", | |
| title: "Office", | |
| items: [{ title: "List Item" }] | |
| }, | |
| { | |
| action: "local_offer", | |
| title: "Promotions", | |
| items: [{ title: "List Item" }] | |
| } | |
| ] | |
| }; | |
| } | |
| }); | |
| export default { | |
| name: "layout", | |
| data: () => ({ | |
| drawer: null | |
| }), | |
| props: { | |
| source: String | |
| } | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment