add whislist + card

components/PageCarousels.vue

@@ -42,5 +42,7 @@ export default {
 </script>
 
 <style>
-
+.v-window__container {
+  margin-top: 20px;
+}
 </style>

components/user/Header.vue

@@ -145,6 +145,7 @@
           >
             <v-text-field
               label="Search"
+              variant="outlined"
             />
             <v-btn
               icon
@@ -185,16 +186,58 @@
           </v-btn>
           <v-divider vertical inset />
           <v-btn
+            id="menu-activator"
             plain
             v-bind="attrs"
             v-on="on"
           >
-            <v-icon large>
-              mdi-cart-outline
-            </v-icon>
+            <v-spacer />
             <span>Cart:
               <b>$:0.00</b>
             </span>
+            <v-badge :content="15" floating>
+              <v-icon large>
+                mdi-cart-outline
+              </v-icon>
+            </v-badge>
+            <v-menu activator="#menu-activator" style="width: 300px">
+              <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 @click="remove(index)">
+                      <v-icon color="grey lighten-1">
+                        mdi-close-circle-outline
+                      </v-icon>
+                    </v-btn>
+                  </v-list-item-action>
+                </v-list-item>
+              </v-list>
+              <v-divider />
+              <div class="d-flex justify-space-between align-center ma-4">
+                <span>Subtotal: </span>
+                <span>139$ </span>
+              </div>
+              <v-divider />
+              <v-btn
+                size="x-large"
+                color="primary"
+                class="d-flex mt-4  align-center mx-auto"
+              >
+                GO TO CHECKOUT
+              </v-btn>
+            </v-menu>
           </v-btn>
         </v-col>
       </v-container>
@@ -247,7 +290,7 @@
           </v-list-item-content>
 
           <v-list-item-action>
-            <v-btn icon>
+            <v-btn icon @click="remove(index)">
               <v-icon color="grey lighten-1">
                 mdi-close-circle-outline
               </v-icon>
@@ -317,6 +360,10 @@ export default {
     openDialogSignUp () {
       this.activeLogin = false
       this.activeLogin = true
+    },
+    remove (index) {
+      this.items.splice(index, 1)
+      console.log(this.items)
     }
   }
 }
@@ -354,4 +401,9 @@ export default {
   .drawer_header{
     padding: 20px 0 20px 30px;
   }
+  .v-menu__content {
+    width: 300px;
+    top: 153px !important;
+    padding: 25px;
+  }
 </style>

components/user/NavBar.vue

@@ -11,7 +11,7 @@
           Products
         </span>
         <v-icon>mdi-chevron-down</v-icon>
-        <div class="dropdown-content">
+        <div class="dropdown-content elevation-10" :elevation="2">
           <v-treeview
             :active.sync="active"
             rounded
@@ -104,6 +104,7 @@ export default {
     z-index: 1;
     background-color: #ffffff;
     min-width: 350px;
+    /* margin-top: 20px; */
   }
 </style>