diff --git a/packages/Webkul/Shop/src/Resources/assets/js/app.js b/packages/Webkul/Shop/src/Resources/assets/js/app.js
index d4abea11f..e728ae97e 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Shop/src/Resources/assets/js/app.js
@@ -11,6 +11,8 @@ Vue.component("category-item", require("./components/category-item.vue"));
 Vue.component("image-slider", require("./components/image-slider.vue"));
 Vue.component("vue-slider", require("vue-slider-component"));
 Vue.component("cart-dropdown", require("./components/cart-dropdown.vue"));
+Vue.component("res-category-nav", require("./components/res-category-nav.vue"));
+Vue.component("res-category-item", require("./components/res-category-item.vue"));
 
 $(document).ready(function () {
 
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
index e38dc943f..1308bce97 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
@@ -12,25 +12,21 @@
     </li>
 </template>
 <script>
-
 // define the item component
-
 export default {
 	props: {
 		item:  Object,
         url: String,
     },
-
     data(){
         return {
             items_count:0
         };
     },
-
     computed: {
         haveChildren() {
             return this.item.children.length ? true : false;
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
index 9be108eb3..baeaeffd3 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
@@ -17,10 +17,8 @@
 </template>
 
 <script>
-
 // define the item component
 export default {
-
     props: {
 		categories: {
             type: [Array, String, Object],
@@ -29,17 +27,15 @@ export default {
         },
         url: String
     },
-
     data(){
         return {
             items_count:0
         };
     },
-
     computed: {
         items () {
             return JSON.parse(this.categories)
         }
     },
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/res-category-item.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/res-category-item.vue
new file mode 100644
index 000000000..1335a472b
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/res-category-item.vue
@@ -0,0 +1,25 @@
+<template>
+    <li>
+
+    </li>
+</template>
+<script>
+// define the item component
+export default {
+	props: {
+		item:  Object,
+        url: String,
+    },
+    data(){
+        return {
+            items_count:0
+        };
+    },
+    computed: {
+        haveChildren() {
+            console.log(this.item.name);
+            return this.item.children.length ? true : false;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/res-category-nav.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/res-category-nav.vue
new file mode 100644
index 000000000..baeaeffd3
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/assets/js/components/res-category-nav.vue
@@ -0,0 +1,41 @@
+<template>
+    <ul class="nav">
+
+        <category-item
+            v-for="(item, index) in items"
+            :key="index"
+            :url="url"
+            :item="item"
+            :parent="index">
+        </category-item>
+        <li>
+            <img src="http://localhost/bagisto/public/vendor/webkul/shop/assets/images/offer-zone.svg"/>
+            <span>Offer Zone</span>
+        </li>
+
+    </ul>
+</template>
+
+<script>
+// define the item component
+export default {
+    props: {
+		categories: {
+            type: [Array, String, Object],
+            required: false,
+            default: () => ([])
+        },
+        url: String
+    },
+    data(){
+        return {
+            items_count:0
+        };
+    },
+    computed: {
+        items () {
+            return JSON.parse(this.categories)
+        }
+    },
+}
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 71227fb36..339d175ea 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -213,8 +213,35 @@ section.slider-block {
     margin-bottom: 21px;
     user-select: none;
 
-    .search-suggestion {
+    .search-responsive {
         display: none;
+
+        .search-content {
+            border-bottom: 1px solid #e8e8e8;
+            height: 48px;
+
+            .search {
+                width: 70%;
+                margin-left: 20px;
+                height: 30px;
+                border: none;
+                font-size: 16px;
+                position: absolute;
+            }
+
+            .right {
+                float: right;
+            }
+
+            .suggestion {
+               position: absolute;
+               margin-left:20px;
+            }
+        }
+
+        .search-content:first-child {
+            border-top: 1px solid #e8e8e8;
+        }
     }
 
     .header-top {
@@ -497,6 +524,10 @@ section.slider-block {
             margin-bottom: 1px;
         }
 
+        .nav > li > a .icon{
+            display: none;
+        }
+
         .nav > li:last-child {
             display:flex; align-items:center;
             border-radius: 0 0 4px 0;
@@ -558,14 +589,109 @@ section.slider-block {
         .nav li li:hover > a:first-child:nth-last-child(2):before {
             right: 10px;
         }
+    }
+
+    .responsive-nav {
+        height: 300px;
+        margin-top: 50px;
+
+        .nav a {
+            display:block;
+            color: $font-color;
+            text-decoration: none;
+            padding: 0.8em 0.3em 0.8em 0.5em;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            position: relative;
+
+            width: 50%;
+        }
+
+        .nav span {
+            display:block;
+            color: $font-color;
+            text-decoration: none;
+            padding: 0.8em 0.3em 0.8em 0.5em;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            position: relative;
+            float: right;
+            width: 50%;
+        }
+
+        .nav > li > a .icon{
+            display: none;
+        }
+
+        .nav > li:last-child {
+            display:flex; align-items:center;
+            border-radius: 0 0 4px 0;
+            float:none;
+            height: 45px;
+
+            img {
+                margin-right:6px;
+            }
+        }
+
+        .nav > li:last-child > a {
+            border-radius: 0 4px 0 0;
+        }
+
+
+        /* submenu positioning*/
+
+        .nav ul {
+            display: none;
+            white-space: nowrap;
+            border: 1px solid #B1B1B1;
+            background-color:white;
+            z-index: 1;
+        }
+
+        .nav > li:hover > ul {
+            left: auto;
+            min-width: 100%;
+            background-color: red;
+            display: block;
+        }
+
+        .nav > li li:hover > ul {
+            left: 20%;
+            margin-left: 1px;
+            top: 48px;
+            background-color:red;
+            display: block;
+        }
+
+
+
+
+
+
     }
 }
 
 @media all and (max-width: 720px) {
+
     .header-bottom {
         display: none !important;
     }
 
+    // .header .header-bottom .nav > li {
+    //         float: none;
+    // }
+
+    // .header .header-bottom .nav > li:last-child {
+    //     float: none;
+    // }
+
+    // .header .header-bottom .nav > li li:hover > ul {
+    //     left: 20%;
+    //     margin-left: 1px;
+    //     top: 45px;
+    // }
+
     ul.search-container {
         display: none !important;
     }
@@ -582,6 +708,9 @@ section.slider-block {
         display: flex !important;
     }
 
+    .responsive-nav {
+        display: none;
+    }
 }
 
 //footer responsive with out media query.
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
index dea756ecb..ba1aa8d3f 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
@@ -13,8 +13,8 @@
 
 .icon-menu-close {
     background-image:URL('../images/icon-menu-close.svg');
-    width: 8px;
-    height: 8px;
+    width: 24px;
+    height: 24px;
     margin-left:auto;
     margin-bottom: 2px;
 }
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss
index b3aac40d3..884cebc8d 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss
@@ -71,6 +71,10 @@ body {
 
 
 //margin-top
+.mt-5 {
+    margin-top: 5px;
+}
+
 .mt-10 {
     margin-top: 10px;
 }
@@ -299,4 +303,5 @@ body {
     width: 100%;
     float: none;
     padding-right: 0px;
-}
\ No newline at end of file
+}
+
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
index e81596070..9ae73ae4f 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
@@ -247,69 +247,116 @@
                     </li>
                 </ul>
                 {{-- <li class="cart-box"><span class="icon cart-icon"></span></li> --}}
-                <li class="menu-box" ><span class="icon sortable-icon" id="sortable"></span></li>
+                <li class="menu-box" ><span class="icon sortable-icon" id="hammenu"></span></li>
             </ul>
         </div>
     </div>
 
+    <div class="search-responsive">
+        <div class="search-content">
+            <i class="icon search-icon mt-10"></i>
+            <input  class="search mt-5">
+            <i class="icon icon-menu-back right mt-10"></i>
+        </div>
+
+        <div class="search-content">
+            <i class="icon search-icon mt-10"></i>
+            <span class="suggestion mt-15">Designer sarees</span>
+        </div>
+    </div>
+
     <div class="header-bottom" id="header-bottom">
     @include('shop::layouts.header.nav-menu.navmenu')
     </div>
 
+    <div class="responsive-nav">
+        <res-category-nav categories='@json($categories)' url="{{url()->to('/')}}"></res-category-nav>
+    </div>
+
 </div>
 
-{{--  @push('scripts')
+@push('scripts')
 
-    <script>
+<script>
 
-        window.onload = function() {
+    window.onload = function() {
 
-            var hamMenu = document.getElementById("hammenu");
-            var search = document.getElementById("search");
-            var searchSuggestion = document.getElementsByClassName('search-suggestion')[0];
-            var headerBottom = document.getElementsByClassName('header-bottom')[0];
-            var nav= document.getElementsByClassName('nav-responsive')[0];
+        var hamMenu = document.getElementById("hammenu");
+        var search = document.getElementById("search");
+        var sort = document.getElementById("sort");
+        var filter = document.getElementById("filter");
 
-            search.addEventListener("click", header);
-            hamMenu.addEventListener("click", header);
+        var searchResponsive = document.getElementsByClassName('search-responsive')[0];
+        var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
+        var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
+        var navResponsive = document.getElementsByClassName('responsive-nav')[0];
 
-            window.addEventListener('scroll', function() {
-                if(window.pageYOffset > 70){
-                    headerBottom.style.visibility = "hidden";
 
-                }else{
-                    headerBottom.style.visibility = "visible";
-                }
-            });
+        search.addEventListener("click", header);
+        hamMenu.addEventListener("click", header);
 
-            function header(){
+        if(sort && filter){
+            sort.addEventListener("click", sortFilter);
+            filter.addEventListener("click", sortFilter);
+        }
 
-                var className = document.getElementById(this.id).className;
+        function header(){
 
-                if(className === 'icon search-icon' ){
-                    search.classList.remove("search-icon");
-                    search.classList.add("cross-icon");
-                    searchSuggestion.style.display = 'block';
-                    document.body.style.overflow = 'hidden';
-                    nav.style.display = 'none';
-                }else if(className === 'icon sortable-icon'){
-                    hamMenu.classList.remove("sortable-icon");
-                    hamMenu.classList.add("cross-icon");
-                    searchSuggestion.style.display = 'none';
-                    nav.style.display = 'block';
-                    document.body.style.overflow = 'hidden';
-                }else{
-                    search.classList.remove("cross-icon");
-                    search.classList.add("search-icon");
-                    hamMenu.classList.remove("cross-icon");
-                    hamMenu.classList.add("sortable-icon");
-                    searchSuggestion.style.display = 'none';
-                    nav.style.display = 'none';
-                    document.body.style.overflow = "scroll";
-                }
+            var className = document.getElementById(this.id).className;
+
+            if(className === 'icon search-icon' ){
+                search.classList.remove("search-icon");
+                search.classList.add("icon-menu-close");
+                hamMenu.classList.remove("icon-menu-close");
+                hamMenu.classList.add("sortable-icon");
+                searchResponsive.style.display = 'block';
+                navResponsive.style.display = 'none';
+            }else if(className === 'icon sortable-icon'){
+                hamMenu.classList.remove("sortable-icon");
+                hamMenu.classList.add("icon-menu-close");
+                search.classList.remove("icon-menu-close");
+                search.classList.add("search-icon");
+                searchResponsive.style.display = 'none';
+                navResponsive.style.display = 'block';
+            }else{
+                search.classList.remove("icon-menu-close");
+                search.classList.add("search-icon");
+                hamMenu.classList.remove("icon-menu-close");
+                hamMenu.classList.add("sortable-icon");
+                searchResponsive.style.display = 'none';
+                navResponsive.style.display = 'none';
             }
         }
 
-    </script>
+        function sortFilter(){
+            var className = document.getElementById(this.id).className;
 
-@endpush  --}}
+            if(className === 'icon sort-icon' ){
+                sort.classList.remove("sort-icon");
+                sort.classList.add("icon-menu-close");
+                filter.classList.remove("icon-menu-close");
+                filter.classList.add("filter-icon");
+                sortLimit.style.display ="flex";
+                sortLimit.style.justifyContent="space-between";
+                layerFilter.style.display ="none";
+            }else if(className === 'icon filter-icon'){
+                filter.classList.remove("filter-icon");
+                filter.classList.add("icon-menu-close");
+                sort.classList.remove("icon-menu-close");
+                sort.classList.add("sort-icon");
+                layerFilter.style.display ="block";
+                sortLimit.style.display ="none";
+            }else{
+                sort.classList.remove("icon-menu-close");
+                sort.classList.add("sort-icon");
+                filter.classList.remove("icon-menu-close");
+                filter.classList.add("filter-icon");
+                sortLimit.style.display ="none";
+                layerFilter.style.display ="none";
+            }
+        }
+    }
+
+</script>
+
+@endpush
diff --git a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
index 50be3f6b3..672238048 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
@@ -54,48 +54,5 @@
 
 @stop
 
-@push('scripts')
-    <script>
 
-        window.onload = function() {
-
-            var sort = document.getElementById("sort");
-            var filter = document.getElementById("filter");
-            var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
-            var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
-
-            sort.addEventListener("click", sortFilter);
-            filter.addEventListener("click", sortFilter);
-
-            function sortFilter(){
-                var className = document.getElementById(this.id).className;
-
-                if(className === 'icon sort-icon' ){
-                    sort.classList.remove("sort-icon");
-                    sort.classList.add("cross-icon");
-                    filter.classList.remove("cross-icon");
-                    filter.classList.add("filter-icon");
-                    sortLimit.style.display ="flex";
-                    sortLimit.style.justifyContent="space-between";
-                    layerFilter.style.display ="none";
-                }else if(className === 'icon filter-icon'){
-                    filter.classList.remove("filter-icon");
-                    filter.classList.add("cross-icon");
-                    sort.classList.remove("cross-icon");
-                    sort.classList.add("sort-icon");
-                    layerFilter.style.display ="block";
-                    sortLimit.style.display ="none";
-                }else{
-                    sort.classList.remove("cross-icon");
-                    sort.classList.add("sort-icon");
-                    filter.classList.remove("cross-icon");
-                    filter.classList.add("filter-icon");
-                    sortLimit.style.display ="none";
-                    layerFilter.style.display ="none";
-                }
-            }
-        }
-
-    </script>
-@endpush
 
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 1eb43c1e6..f68cab024 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -13,8 +13,8 @@
 
 .icon-menu-close {
   background-image: URL("../images/icon-menu-close.svg");
-  width: 8px;
-  height: 8px;
+  width: 24px;
+  height: 24px;
   margin-left: auto;
   margin-bottom: 2px;
 }
@@ -277,6 +277,10 @@ body {
   margin-bottom: 90px;
 }
 
+.mt-5 {
+  margin-top: 5px;
+}
+
 .mt-10 {
   margin-top: 10px;
 }
@@ -686,10 +690,37 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
           user-select: none;
 }
 
-.header .search-suggestion {
+.header .search-responsive {
   display: none;
 }
 
+.header .search-responsive .search-content {
+  border-bottom: 1px solid #e8e8e8;
+  height: 48px;
+}
+
+.header .search-responsive .search-content .search {
+  width: 70%;
+  margin-left: 20px;
+  height: 30px;
+  border: none;
+  font-size: 16px;
+  position: absolute;
+}
+
+.header .search-responsive .search-content .right {
+  float: right;
+}
+
+.header .search-responsive .search-content .suggestion {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.header .search-responsive .search-content:first-child {
+  border-top: 1px solid #e8e8e8;
+}
+
 .header .header-top {
   margin-bottom: 16px;
   display: -webkit-box;
@@ -1033,6 +1064,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   margin-bottom: 1px;
 }
 
+.header .header-bottom .nav > li > a .icon {
+  display: none;
+}
+
 .header .header-bottom .nav > li:last-child {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1098,6 +1133,82 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   right: 10px;
 }
 
+.header .responsive-nav {
+  height: 300px;
+  margin-top: 50px;
+  /* submenu positioning*/
+}
+
+.header .responsive-nav .nav a {
+  display: block;
+  color: #242424;
+  text-decoration: none;
+  padding: 0.8em 0.3em 0.8em 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  position: relative;
+  width: 50%;
+}
+
+.header .responsive-nav .nav span {
+  display: block;
+  color: #242424;
+  text-decoration: none;
+  padding: 0.8em 0.3em 0.8em 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  position: relative;
+  float: right;
+  width: 50%;
+}
+
+.header .responsive-nav .nav > li > a .icon {
+  display: none;
+}
+
+.header .responsive-nav .nav > li:last-child {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 0 0 4px 0;
+  float: none;
+  height: 45px;
+}
+
+.header .responsive-nav .nav > li:last-child img {
+  margin-right: 6px;
+}
+
+.header .responsive-nav .nav > li:last-child > a {
+  border-radius: 0 4px 0 0;
+}
+
+.header .responsive-nav .nav ul {
+  display: none;
+  white-space: nowrap;
+  border: 1px solid #B1B1B1;
+  background-color: white;
+  z-index: 1;
+}
+
+.header .responsive-nav .nav > li:hover > ul {
+  left: auto;
+  min-width: 100%;
+  background-color: red;
+  display: block;
+}
+
+.header .responsive-nav .nav > li li:hover > ul {
+  left: 20%;
+  margin-left: 1px;
+  top: 48px;
+  background-color: red;
+  display: block;
+}
+
 @media all and (max-width: 720px) {
   .header-bottom {
     display: none !important;
@@ -1116,6 +1227,9 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     display: -ms-flexbox !important;
     display: flex !important;
   }
+  .responsive-nav {
+    display: none;
+  }
 }
 
 .footer {
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index 5e70c2460..09ee618c4 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -1076,7 +1076,7 @@ module.exports = Cancel;
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(11);
-module.exports = __webpack_require__(54);
+module.exports = __webpack_require__(60);
 
 
 /***/ }),
@@ -1096,6 +1096,8 @@ Vue.component("category-item", __webpack_require__(39));
 Vue.component("image-slider", __webpack_require__(42));
 Vue.component("vue-slider", __webpack_require__(50));
 Vue.component("cart-dropdown", __webpack_require__(51));
+Vue.component("res-category-nav", __webpack_require__(54));
+Vue.component("res-category-item", __webpack_require__(57));
 
 $(document).ready(function () {
 
@@ -30701,10 +30703,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 
-
 // define the item component
 /* harmony default export */ __webpack_exports__["default"] = ({
-
     props: {
         categories: {
             type: [Array, String, Object],
@@ -30715,14 +30715,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         },
         url: String
     },
-
     data: function data() {
         return {
             items_count: 0
         };
     },
 
-
     computed: {
         items: function items() {
             return JSON.parse(this.categories);
@@ -30847,22 +30845,18 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 
-
 // define the item component
-
 /* harmony default export */ __webpack_exports__["default"] = ({
     props: {
         item: Object,
         url: String
     },
-
     data: function data() {
         return {
             items_count: 0
         };
     },
 
-
     computed: {
         haveChildren: function haveChildren() {
             return this.item.children.length ? true : false;
@@ -31740,6 +31734,251 @@ if (false) {
 
 /***/ }),
 /* 54 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(1)
+/* script */
+var __vue_script__ = __webpack_require__(55)
+/* template */
+var __vue_template__ = __webpack_require__(56)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/res-category-nav.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-1555b7ad", Component.options)
+  } else {
+    hotAPI.reload("data-v-1555b7ad", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 55 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+// define the item component
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: {
+        categories: {
+            type: [Array, String, Object],
+            required: false,
+            default: function _default() {
+                return [];
+            }
+        },
+        url: String
+    },
+    data: function data() {
+        return {
+            items_count: 0
+        };
+    },
+
+    computed: {
+        items: function items() {
+            return JSON.parse(this.categories);
+        }
+    }
+});
+
+/***/ }),
+/* 56 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "ul",
+    { staticClass: "nav" },
+    [
+      _vm._l(_vm.items, function(item, index) {
+        return _c("category-item", {
+          key: index,
+          attrs: { url: _vm.url, item: item, parent: index }
+        })
+      }),
+      _vm._v(" "),
+      _vm._m(0)
+    ],
+    2
+  )
+}
+var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("li", [
+      _c("img", {
+        attrs: {
+          src:
+            "http://localhost/bagisto/public/vendor/webkul/shop/assets/images/offer-zone.svg"
+        }
+      }),
+      _vm._v(" "),
+      _c("span", [_vm._v("Offer Zone")])
+    ])
+  }
+]
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-1555b7ad", module.exports)
+  }
+}
+
+/***/ }),
+/* 57 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(1)
+/* script */
+var __vue_script__ = __webpack_require__(58)
+/* template */
+var __vue_template__ = __webpack_require__(59)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/res-category-item.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-616674f9", Component.options)
+  } else {
+    hotAPI.reload("data-v-616674f9", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 58 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+
+// define the item component
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: {
+        item: Object,
+        url: String
+    },
+    data: function data() {
+        return {
+            items_count: 0
+        };
+    },
+
+    computed: {
+        haveChildren: function haveChildren() {
+            return this.item.children.length ? true : false;
+        }
+    }
+});
+
+/***/ }),
+/* 59 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("li")
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-616674f9", module.exports)
+  }
+}
+
+/***/ }),
+/* 60 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin