update navbar style

components/LoginModal.vue

 <template>
-  <v-row
-    justify="center"
+  <v-dialog
+    v-model="dialog"
+    width="450px"
+    @click:outside="closeDialog"
   >
-    <v-dialog
-      v-model="dialog"
-      width="450px"
-      @click:outside="closeDialog"
-    >
-      <v-card-title class="justify-center">
-        <p class="font-weight-black" style="font-size: 35px">
-          LOGIN
-        </p>
-      </v-card-title>
-      <v-form ref="form" justify="center" class="formlogin">
-        <v-col cols="12" sm="6" md="12">
-          <v-text-field
-            v-model="email"
-            variant="underlined"
-            label="Email"
-            required
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="12">
-          <v-text-field
-            v-model="password"
-            variant="underlined"
-            label="Password"
-            required
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="12" justify-content: space-between>
-          <v-checkbox
-            label="Remember me"
-          />
-        </v-col>
-
-        <div class="d-flex flex-column">
-          <v-btn
-            color="primary"
-            class="mt-4"
-            block
-            @click="login"
-          >
-            Login
-          </v-btn>
-          <v-btn
-            color="primary"
-            class="mt-4"
-            block
-            @click="$emit('close')"
-          >
-            Close
-          </v-btn>
-        </div>
-      </v-form>
-      <v-col cols="12" style="display:flex">
-        <v-divider sm="6" /> login with <v-divider sm="6" />
+    <v-card-title class="justify-center">
+      <p class="font-weight-black" style="font-size: 35px">
+        LOGIN
+      </p>
+    </v-card-title>
+    <v-form ref="form" justify="center" class="formlogin">
+      <v-col cols="12" sm="6" md="12">
+        <v-text-field
+          v-model="email"
+          variant="underlined"
+          label="Email"
+          required
+        />
+      </v-col>
+      <v-col cols="12" sm="6" md="12">
+        <v-text-field
+          v-model="password"
+          variant="underlined"
+          label="Password"
+          required
+        />
       </v-col>
-      <v-col cols="12" style="text-align: center;">
-        <v-icon>
-          mdi-twitter
-        </v-icon>
-        <v-icon>
-          mdi-facebook
-        </v-icon>
-        <v-icon>
-          mdi-instagram
-        </v-icon>
+      <v-col cols="12" sm="6" md="12" justify-content: space-between>
+        <v-checkbox
+          label="Remember me"
+        />
       </v-col>
-    </v-dialog>
-  </v-row>
+
+      <div class="d-flex flex-column">
+        <v-btn
+          color="primary"
+          class="mt-4"
+          block
+          @click="login"
+        >
+          Login
+        </v-btn>
+        <v-btn
+          color="primary"
+          class="mt-4"
+          block
+          @click="$emit('close')"
+        >
+          Close
+        </v-btn>
+      </div>
+    </v-form>
+    <v-col cols="12" style="display:flex">
+      <v-divider sm="6" /> login with <v-divider sm="6" />
+    </v-col>
+    <v-col cols="12" style="text-align: center;">
+      <v-icon>
+        mdi-twitter
+      </v-icon>
+      <v-icon>
+        mdi-facebook
+      </v-icon>
+      <v-icon>
+        mdi-instagram
+      </v-icon>
+    </v-col>
+  </v-dialog>
 </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"
-      @click:outside="closeDialog"
-    >
-      <v-card-title class="justify-center">
-        <p class="font-weight-black" style="font-size: 35px">
-          REGISTER
-        </p>
-      </v-card-title>
-      <v-form ref="form" justify="center" class="formlogin">
-        <v-col cols="12" sm="6" md="12">
-          <v-text-field
-            v-model="name"
-            variant="underlined"
-            label="Name"
-            :rules="requiredRules"
-            required
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="12">
-          <v-text-field
-            v-model="email"
-            variant="underlined"
-            label="Email"
-            :rules="emailRules"
-            required
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="12">
-          <v-text-field
-            v-model="password"
-            variant="underlined"
-            label="Password"
-            type="password"
-            :rules="passwordRules"
-            required
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="12">
-          <v-text-field
-            v-model="password_confirmation"
-            variant="underlined"
-            label="Confirm your password"
-            type="password"
-            :rules="[passwordRules, passwordConfirmationRule]"
-            required
-          />
-        </v-col>
-        <v-col cols="12" sm="6" md="12" justify-content: space-between>
-          <v-checkbox
-            v-model="checkbox"
-            label="I agree to the privacy policy"
-          />
-        </v-col>
-
-        <div class="d-flex flex-column">
-          <v-btn
-            color="primary"
-            class="mt-4"
-            block
-            @click="signup"
-          >
-            Sign Up
-          </v-btn>
-          <v-btn
-            color="primary"
-            class="mt-4"
-            block
-            @click="$emit('close')"
-          >
-            Close
-          </v-btn>
-        </div>
-      </v-form>
-      <v-col cols="12" style="display:flex">
-        <v-divider sm="6" /> login with <v-divider sm="6" />
+  <v-dialog
+    v-model="dialog"
+    width="450px"
+    @click:outside="closeDialog"
+  >
+    <v-card-title class="justify-center">
+      <p class="font-weight-black" style="font-size: 35px">
+        REGISTER
+      </p>
+    </v-card-title>
+    <v-form ref="form" justify="center" class="formlogin">
+      <v-col cols="12" sm="6" md="12">
+        <v-text-field
+          v-model="name"
+          variant="underlined"
+          label="Name"
+          :rules="requiredRules"
+          required
+        />
+      </v-col>
+      <v-col cols="12" sm="6" md="12">
+        <v-text-field
+          v-model="email"
+          variant="underlined"
+          label="Email"
+          :rules="emailRules"
+          required
+        />
+      </v-col>
+      <v-col cols="12" sm="6" md="12">
+        <v-text-field
+          v-model="password"
+          variant="underlined"
+          label="Password"
+          type="password"
+          :rules="passwordRules"
+          required
+        />
       </v-col>
-      <v-col cols="12" style="text-align: center;">
-        <v-icon>
-          mdi-twitter
-        </v-icon>
-        <v-icon>
-          mdi-facebook
-        </v-icon>
-        <v-icon>
-          mdi-instagram
-        </v-icon>
+      <v-col cols="12" sm="6" md="12">
+        <v-text-field
+          v-model="password_confirmation"
+          variant="underlined"
+          label="Confirm your password"
+          type="password"
+          :rules="[passwordRules, passwordConfirmationRule]"
+          required
+        />
       </v-col>
-    </v-dialog>
-  </v-row>
+      <v-col cols="12" sm="6" md="12" justify-content: space-between>
+        <v-checkbox
+          v-model="checkbox"
+          label="I agree to the privacy policy"
+        />
+      </v-col>
+
+      <div class="d-flex flex-column">
+        <v-btn
+          color="primary"
+          class="mt-4"
+          block
+          @click="signup"
+        >
+          Sign Up
+        </v-btn>
+        <v-btn
+          color="primary"
+          class="mt-4"
+          block
+          @click="$emit('close')"
+        >
+          Close
+        </v-btn>
+      </div>
+    </v-form>
+    <v-col cols="12" style="display:flex">
+      <v-divider sm="6" /> login with <v-divider sm="6" />
+    </v-col>
+    <v-col cols="12" style="text-align: center;">
+      <v-icon>
+        mdi-twitter
+      </v-icon>
+      <v-icon>
+        mdi-facebook
+      </v-icon>
+      <v-icon>
+        mdi-instagram
+      </v-icon>
+    </v-col>
+  </v-dialog>
 </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')
       }
     }