<template>
  <nav>
    <v-toolbar flat app>
      <v-toolbar-side-icon class="grey--text" @click="drawer = !drawer">nav</v-toolbar-side-icon>
      <v-toolbar-title class="text-uppercase grey--text">
        <span class="font-weight-light">Todo</span>
        <span>Ninja</span>
      </v-toolbar-title>
      <v-spacer/>
      <v-btn flat fab small color="grey">
        <v-icon small>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>

    <!--    color success(녹색), primary(파랑), warning(빨강)-->
    <v-navigation-drawer app v-model="drawer" class="success">
      <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>
  </nav>
</template>
<script>
  import inspire from "../pages/inspire";
  import index from "../pages/index";

  export default {
    name: "NavBar",
    data() {
      return {
        drawer: false,
        links: [
          {icon: 'dashboard', text: 'Dashboard', route: '/'},
          {icon: 'folder', text: 'MyProfile', route: '/inspire'},
          {icon: 'person', text: 'Team', route: '/'},
        ]
      }
    }
  }
</script>

<style scoped>

</style>