add wishlist drawer

components/user/Header.vue

@@ -177,7 +177,7 @@
             plain
             v-bind="attrs"
             v-on="on"
-            @click.stop="drawer = !drawer"
+            @click.stop="drawer = true"
           >
             <v-icon large>
               mdi-heart-outline
@@ -247,6 +247,53 @@
     <!-- show modal -->
     <LoginModal :status="activeLogin" @close="activeLogin=false" />
     <SignupModal :status="activeRegister" @close="activeRegister=false" />
+    <!-- show drawer -->
+    <v-navigation-drawer
+      v-model="drawer"
+      absolute
+      right
+      width="350px"
+      temporary
+    >
+      <div class="d-flex justify-space-between drawer_header">
+        <b>WISHLIST</b>
+        <v-btn
+          plain
+          @click.stop="drawer = !drawer"
+        >
+          Close
+          <v-icon>
+            mdi-arrow-right-thin
+          </v-icon>
+        </v-btn>
+      </div>
+
+      <v-divider />
+
+      <v-list dense three-line>
+        <v-list-item
+          v-for="item in items"
+          :key="item.title"
+          link
+        >
+          <v-list-item-avatar>
+            <v-img :src="item.prependAvatar" />
+          </v-list-item-avatar>
+          <v-list-item-content>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+            <v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
+          </v-list-item-content>
+
+          <v-list-item-action>
+            <v-btn icon>
+              <v-icon color="grey lighten-1">
+                mdi-close-circle-outline
+              </v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
   </div>
 </template>
 
@@ -265,7 +312,7 @@ export default {
       activeLogin: false,
       activeRegister: false,
       drawer: false,
-      files: [
+      items: [
         {
           prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
           title: 'Brunch this weekend?',
@@ -348,4 +395,7 @@ export default {
   .modal_header > i {
     scale: 0.8;
   }
+  .drawer_header{
+    padding: 20px 0 20px 30px;
+  }
 </style>