Merge branch 'feature/homepage-header' of...

Merge branch 'feature/homepage-header' of https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt into feature/homepage-header

components/user/Header.vue

@@ -177,6 +177,7 @@
             plain
             v-bind="attrs"
             v-on="on"
+            @click.stop="drawer = true"
           >
             <v-icon large>
               mdi-heart-outline
@@ -246,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>
 
@@ -262,10 +310,42 @@ export default {
   data: () => {
     return {
       activeLogin: false,
-      activeRegister: false
+      activeRegister: false,
+      drawer: false,
+      items: [
+        {
+          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
+    },
     openDialogLogin () {
       this.activeLogin = false
       this.activeLogin = true
@@ -299,4 +379,23 @@ 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;
+  }
+  .drawer_header{
+    padding: 20px 0 20px 30px;
+  }
 </style>