Merge branch 'feature/navbar' into 'feature/deploy-to-aws'

update navbar style

See merge request !28

components/LoginModal.vue

 <template>
-  <v-row
-    justify="center"
-  >
   <v-dialog
     v-model="dialog"
     width="450px"
@@ -69,7 +66,6 @@
       </v-icon>
     </v-col>
   </v-dialog>
-  </v-row>
 </template>
 
 <script>

components/PageCarousels.vue

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

components/RegisterModal.vue

 <template>
-  <v-row justify="center">
   <v-dialog
     v-model="dialog"
     width="450px"
@@ -90,7 +89,6 @@
       </v-icon>
     </v-col>
   </v-dialog>
-  </v-row>
 </template>
 
 <script>

components/user/CategoryTree.vue

+<template>
+  <ul class="dropdown-item">
+    <TreeNode v-for="(item, i) in categories" :key="i" :node="item" />
+  </ul>
+</template>
+
+<script>
+import TreeNode from '~/components/user/TreeNode.vue'
+
+export default {
+  name: 'CategoryTree',
+  components: {
+    TreeNode
+  },
+  props: {
+    categories: Object
+  },
+  data: () => ({
+    selectedItem: 1
+  })
+}
+</script>
+
+<style>
+.dropdown-item {
+  box-shadow: 0 2px 35px rgba(0,0,0,0.1);
+}
+li {
+  list-style: none;
+  line-height: 2rem;
+  padding: 0 1.5rem;
+}
+li span {
+  font-size: 15px;
+}
+li > ul {
+  position: absolute;
+  left: 100%;
+  box-shadow: 0 2px 35px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease-out;
+}
+li:hover > ul {
+  transform: translate3d(0,0,0);
+}
+ul.dropdown-item {
+  padding: 10px 0;
+}
+</style>

components/user/NavBar.vue

 <template>
-  <v-container>
-    <div class="navbar d-flex justify-space-between ">
-      <div class="d-flex justify-space-between col-md-7">
-        <div>
+  <v-container class="navbar-container">
+    <div class="navbar">
+      <div class="navbar-left">
+        <div class="navbar-item">
           <span>
             Home
           </span>
         </div>
-        <div class="dropdown">
+        <div class="navbar-item dropdown">
           <span>
             Products
           </span>
           <v-icon>mdi-chevron-down</v-icon>
-          <div class="dropdown-content elevation-10" :elevation="2">
-            <v-treeview
-              :active.sync="active"
-              rounded
-              dense
-              hoverable
-              activatable
-              :items="categories"
-              @update:active="setCategory(item)"
-            >
-              <template #label="{ item }">
-                <nuxt-link :to="`/home-page/categories/${item.id}`" tag="div">
-                  {{ item.name }}
-                </nuxt-link>
-              </template>
-            </v-treeview>
+          <div class="dropdown-content" :elevation="2">
+            <CategoryTree :categories="categories" />
           </div>
         </div>
-        <div>
+        <div class="navbar-item">
           <span>
             Pages
           </span>
         </div>
-        <div>
+        <div class="navbar-item">
           <span>
             Blogs
           </span>
         </div>
-        <div>
+        <div class="navbar-item">
           <span>
             About
           </span>
         </div>
       </div>
-      <div class="none-tag align-center ">
+      <div class="d-flex align-center none-tag">
         <v-icon>mdi-tag</v-icon>
         <span class="mx-2">
           Special offer!
@@ -62,8 +48,13 @@
 <script>
 import { mapActions, mapState } from 'vuex'
 
+import CategoryTree from '~/components/user/CategoryTree.vue'
+
 export default {
   name: 'NavBar',
+  components: {
+    CategoryTree
+  },
   data: () => ({
     active: [],
     open: [],
@@ -111,6 +102,14 @@ export default {
 </script>
 
 <style scoped>
+  .navbar-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+  }
   .navbar span {
     font-weight: bold;
     cursor: pointer;
@@ -119,10 +118,21 @@ export default {
   .navbar span:hover {
     color: #26c;
   }
+  .navbar-left {
+    width: 50%;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 0;
+    padding-right: 0;
+  }
   .dropdown {
     position: relative;
   }
+  .dropdown span {
+    font-size: 15px;
+  }
   .dropdown:hover .dropdown-content {
+    transition: 0.3s;
     display: block;
   }
   .dropdown-content {
@@ -130,8 +140,7 @@ export default {
     position: absolute;
     z-index: 1;
     background-color: #ffffff;
-    min-width: 350px;
-    /* margin-top: 20px; */
+    min-width: 250px;
   }
   .none-tag {
     display: flex;

components/user/TreeNode.vue

+<template>
+  <li class="dropdown">
+    <nuxt-link class="label" :to="`/home-page/categories/${node.id}`" tag="span">
+      {{ node.name }}
+    </nuxt-link>
+    <ul v-if="node.children && node.children.length" class="dropdown-item">
+      <TreeNode v-for="child in node.children" :key="child.id" :node="child" />
+    </ul>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'TreeNode',
+  props: {
+    node: Object
+  }
+}
+</script>
+
+<style scoped>
+  .dropdown {
+    position: relative;
+    cursor: pointer;
+  }
+  .dropdown-item {
+    display: none;
+  }
+  .dropdown:hover > .dropdown-item {
+    display: block;
+  }
+  .dropdown-item {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    background-color: #ffffff;
+    min-width: 250px;
+    top: -10px;
+  }
+  li:hover > span {
+    color: #2266cc;
+  }
+</style>

pages/login.vue

@@ -48,16 +48,12 @@
   </v-app>
 </template>
 <script>
-export default {
-  // eslint-disable-next-line no-undef
-  components: { NuxtLogo }
-}
-</script>
-<script>
 import { validationMixin } from 'vuelidate'
 import { required, minLength, email } from 'vuelidate/lib/validators'
+import { NuxtLogo } from '@/components/NuxtLogo.vue'
 
 export default {
+  components: { NuxtLogo },
   dark: false,
   mixins: [validationMixin],
   layout: 'empty',
@@ -124,14 +120,14 @@ export default {
         this.$auth.$storage.setUniversal('loggedIn', 'true')
         if (resp.status === 200) {
           this.$toast.success('Successfully authenticated', {
-            duration: 2000,
-          });
-          this.$router.push('home');
+            duration: 2000
+          })
+          this.$router.push('home')
         }
       } catch (e) {
         this.$toast.error('Username or Password not valid', {
           duration: 2000
-        });
+        })
         this.$router.push('/login')
       }
     }