create wish list modal

components/LoginModal.vue

 <template>
-    <v-row v-if="dialog" justify="center">
+  <v-row justify="center">
     <v-dialog
       v-model="dialog"
       width="450px"
+      @click:outside="closeDialog"
     >
       <!-- <template #activator="{ on, attrs }">
             <v-btn
@@ -81,23 +82,27 @@
 
 <script>
 export default {
-name: 'LoginModal',
-props: {
+  name: 'LoginModal',
+  props: {
     status: {
       type: Boolean,
       default: true
     }
-},
-data: () => ({
+  },
+  data: () => ({
     email: '',
     password: ''
-}),
-computed: {
+  }),
+  computed: {
     dialog () {
-    return this.status
+      return this.$props.status
     }
-},
-methods: {
+  },
+  methods: {
+    closeDialog () {
+      this.$props.status = false
+      console.log(this.$props.status)
+    },
     async login () {
       try {
         const resp = await this.$axios.post('/login',
@@ -122,7 +127,7 @@ methods: {
         this.$router.push('/login')
       }
     }
-}
+  }
 }
 </script>
 
@@ -131,4 +136,3 @@ methods: {
     padding: 30px;
 }
 </style>
-  
\ No newline at end of file

components/user/Header.vue

@@ -103,7 +103,7 @@
               plain
               v-bind="attrs"
               v-on="on"
-              @click="activeLogin=true"
+              @click="closeDialog"
             >
               <v-icon>mdi-account-outline</v-icon>
               <span>login</span>
@@ -177,6 +177,7 @@
             plain
             v-bind="attrs"
             v-on="on"
+            @click.stop="drawer = !drawer"
           >
             <v-icon large>
               mdi-heart-outline
@@ -244,8 +245,55 @@
     <!-- end header bottom -->
 
     <!-- show modal -->
-    <LoginModal v-click-outside="() => activeLogin = false" :status="activeLogin" @close="activeLogin=false" />
-    <SignupModal v-click-outside="() => activeRegister = false" :status="activeRegister" @close="activeRegister=false" />
+    <LoginModal :status="activeLogin" @click:outside="closeDialog" @close="activeLogin=false" />
+    <SignupModal :status="activeRegister" @close="activeRegister=false" />
+    <!-- show drawer -->
+    <v-navigation-drawer
+      v-model="drawer"
+      width="300px"
+      right
+      temporary
+      class="favorite-modal"
+    >
+      <div class="d-flex justify-space-between modal_header">
+        <b>WISHLIST</b>
+        <v-btn plain @click="drawer = false">
+          Close
+          <v-icon>mdi-arrow-right</v-icon>
+        </v-btn>
+      </div>
+      <v-divider />
+      <v-list
+        three-line
+      >
+        <v-list-item
+          v-for="folder in files"
+          :key="folder.title"
+        >
+          <v-list-item-avatar>
+            <v-img :src="folder.prependAvatar" />
+          </v-list-item-avatar>
+
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ folder.title }}
+            </v-list-item-title>
+
+            <v-list-item-subtitle>
+              {{ folder.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>
 
@@ -262,7 +310,41 @@ export default {
   data: () => {
     return {
       activeLogin: false,
-      activeRegister: false
+      activeRegister: false,
+      drawer: false,
+      files: [
+        {
+          prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
+          title: 'Brunch this weekend?',
+          subtitle: '<span class="text-primary">Ali Connors</span> &mdash; I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?'
+        },
+        {
+          prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
+          title: 'Summer BBQ',
+          subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I\'m out of town this weekend.'
+        },
+        {
+          prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
+          title: 'Oui oui',
+          subtitle: '<span class="text-primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?'
+        },
+        {
+          prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
+          title: 'Birthday gift',
+          subtitle: '<span class="text-primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?'
+        },
+        {
+          prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
+          title: 'Recipe to try',
+          subtitle: '<span class="text-primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
+        }
+      ]
+    }
+  },
+  methods: {
+    closeDialog () {
+      this.activeLogin = false
+      this.activeLogin = true
     }
   }
 }
@@ -289,4 +371,20 @@ export default {
   .navbar span:hover {
     color: #26c;
   }
+  .favorite-modal {
+    position: fixed;
+  }
+  .favorite-modal .modal_header {
+    padding: 20px 0px 20px 30px;
+  }
+  .modal_header > b {
+    font-weight: 700;
+    font-size: 16px;
+  }
+  .modal_header >  button {
+    font-size: 12px;
+  }
+  .modal_header > i {
+    scale: 0.8;
+  }
 </style>