nav.vue

<template>
  <div>
    <v-navigation-drawer
      app
      v-model="drawer"
      id="sidenav"
      :value="$vuetify.breakpoint.mdAndUp"
      class="grey lighten-4"
    >
      <v-layout column justify-space-between fill-height>
        <div>
          <v-list class="pb-2 pt-0">
            <v-list-group>
              <v-list-tile avatar slot="activator">
                <v-list-tile-avatar>
                  <img :src="userAvatar">
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>{{ name }}</v-list-tile-title>
                  <v-list-tile-sub-title>{{ username }}</v-list-tile-sub-title>
                </v-list-tile-content>
              </v-list-tile>
              <v-list-tile
                avatar
                @click="exportData"
                class="black--text"
                active-class="primary--text"
              >
                <v-list-tile-avatar>
                  <v-icon>mdi-download</v-icon>
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>Backup Notes</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
              <v-list-tile avatar to="/import" class="black--text" active-class="primary--text">
                <v-list-tile-avatar>
                  <v-icon>mdi-import</v-icon>
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>Import</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
              <v-list-tile
                avatar
                @click="signOut"
                class="black--text"
                active-class="primary--text purple lighten-5"
              >
                <v-list-tile-avatar>
                  <v-icon>mdi-logout</v-icon>
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>Sign Out</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
            </v-list-group>
            <v-list-tile
              @click="labelClick('All')"
              :value="filterLabel === 'All'"
              active-class="primary--text purple lighten-5"
            >
              <v-list-tile-avatar>
                <v-icon>mdi-view-dashboard-variant</v-icon>
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title>All Notes</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile
              @click="labelClick('Favorites')"
              :value="filterLabel === 'Favorites'"
              active-class="primary--text purple lighten-5"
            >
              <v-list-tile-avatar>
                <v-icon>mdi-heart</v-icon>
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title>Favorites</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile
              @click="labelClick('trash')"
              :value="filterLabel === 'trash'"
              active-class="primary--text purple lighten-5"
            >
              <v-list-tile-avatar>
                <v-icon>mdi-delete</v-icon>
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title>Trash</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-divider></v-divider>
            <template v-for="(item, lblIdx) in getLabels">
              <v-list-tile
                avatar
                @click="labelClick(item)"
                :key="lblIdx"
                :value="filterLabel === item"
                active-class="primary--text purple lighten-5"
              >
                <v-list-tile-avatar>
                  <v-icon>mdi-label</v-icon>
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>{{ item }}</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
            </template>
            <v-list-group v-model="colorGrp" key="clrs" v-if="colors.length">
              <v-list-tile avatar slot="activator">
                <v-list-tile-avatar>
                  <v-icon>mdi-circle-outline</v-icon>
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>Filter By Color</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
              <template v-for="(color, i) in colors">
                <v-list-tile
                  avatar
                  @click.stop="labelClick('Color: ' + color)"
                  :key="i"
                  active-class="primary--text purple lighten-5"
                  :value="filterLabel === 'Color: ' + color"
                >
                  <v-list-tile-avatar>
                    <v-icon :color="color">mdi-circle</v-icon>
                  </v-list-tile-avatar>
                  <v-list-tile-content
                    class="capitalize"
                  >{{ color.substr(0,color.indexOf(' ')) + ' Notes' }}</v-list-tile-content>
                </v-list-tile>
              </template>
            </v-list-group>
          </v-list>
        </div>
        <div>
          <p class="text-xs-center caption grey--text">This is beta software.</p>
          <v-toolbar color="transparent" dense flat class="pt-0">
            <v-toolbar-items>
              <v-btn icon href="http://stealthy.im" target="_blank">
                <v-icon>mdi-telegram</v-icon>
              </v-btn>
              <v-btn
                icon
                href="http://twitter.com/home?status=I'm%20taking%20back%20control%20of%20my%20data%20with%20%40NoteRiot!%20%20https%3A%2F%2Fnote.riot.ai"
                target="_blank"
              >
                <v-icon>mdi-twitter</v-icon>
              </v-btn>
              <v-btn flat icon href="https://www.producthunt.com/posts/noteriot" target="_blank">
                <v-avatar size="24px">
                  <img src="/static/img/product-hunt-brands.svg" alt="Product Hunt Logo">
                </v-avatar>
              </v-btn>
              <v-btn
                flat
                icon
                href="https://guides.github.com/features/mastering-markdown/"
                target="_blank"
              >
                <v-icon>mdi-help-circle</v-icon>
              </v-btn>
            </v-toolbar-items>
          </v-toolbar>
        </div>
      </v-layout>
    </v-navigation-drawer>
    
</template>



<style scoped>
/* .active-list {
  background-color: mediumpurple;
} */
a {
  text-decoration: none;
}
.capitalize {
  text-transform: capitalize;
}
</style>