navigation menu category ready, styles left to be applied accordingly

packages/Webkul/Shop/src/Http/ViewComposers/Categories/CategoryComposer.php

@@ -35,7 +35,6 @@ class CategoryComposer
         foreach ($categories as $category) {
             array_push($collected_cat, collect($category));
         }
-        dd(count($collected_cat[0]['children']));
         $view->with('categories', $collected_cat);
     }
 }

packages/Webkul/Shop/src/Resources/assets/js/app.js

@@ -6,6 +6,10 @@ Vue.use(VeeValidate);
 
 //pure JS for resizing of browser purposes only
 
+Vue.component("category-nav", require("./components/category-nav.vue"));
+Vue.component("category-item", require("./components/category-item.vue"));
+Vue.component("image-slider", require("./components/imageSlider.vue"));
+
 $(window).resize(function() {
     var w = $(document).width();
     var window = {};
@@ -29,8 +33,6 @@ $(window).resize(function() {
 });
 
 $(document).ready(function() {
-    Vue.component("image-slider", require("./components/imageSlider.vue"));
-    // Vue.component("nav-view", require("./components/navVue.vue"));
     /* Responsiveness script goes here */
     var w = $(document).width();
     var window = {};

packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue

@@ -0,0 +1,51 @@
+<template>
+    <li class="root">
+        <a href="">{{ item.name }}</a>
+        <!-- replace the below inner-child class with dropdown that -->
+        <ul class="inner-dropdown" v-if="haveChildren">
+            <category-item
+                class="inner-item"
+                v-for="(child, index) in item.children"
+                :key="index"
+                :item="child">
+            </category-item>
+        </ul>
+    </li>
+</template>
+
+<script>
+// define the item component
+export default {
+	props: {
+		item:  Object,
+        url: String
+    },
+
+    methods:{
+        change: function () {
+            this.isActive = true;
+        }
+    },
+
+    created() {
+        // console.log(this.item)
+    },
+
+    computed: {
+        haveChildren() {
+            return this.item.children.length ? true : false;
+        }
+    }
+}
+</script>
+<style>
+    .inner-dropdown {
+        position:absolute;
+        background:white;
+        border: 1px solid red;
+        color:black;
+        margin-top:35px;
+        padding:5px;
+        width:148px;
+    }
+</style>

packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue

@@ -0,0 +1,74 @@
+<template>
+    <ul class="menu-bar">
+        <category-item
+            v-for="(item, index) in items"
+            :key="index"
+            :url="url"
+            :item="item">
+        </category-item>
+        <li>
+            <img class="icon" src="vendor/webkul/shop/assets/images/offer-zone.svg" style="margin-right:5px;" />Offer Zone
+        </li>
+    </ul>
+</template>
+
+<script>
+// define the item component
+export default {
+	props: {
+		categories: {
+            type: [Array, String, Object],
+            required: false,
+            default: () => ([])
+        },
+        url: String
+    },
+
+    created () {
+        console.log(this.url)
+    },
+
+    computed: {
+        items () {
+            return JSON.parse(this.categories)
+        }
+    }
+}
+</script>
+<style>
+    .menu-bar {
+        text-transform: capitalize;
+        color: #242424;
+    }
+
+    .menu-bar li {
+        min-width:50px;
+        height:48px;
+    }
+
+    .menu-bar li a{
+        display:block;
+    }
+
+    .menu-bar li inner-dropdown.ul li{
+        display:block;
+        height:48px;
+    }
+
+    .menu-bar li inner-dropdown.ul li a{
+        display:block;
+        height:48px;
+    }
+
+    .inner-dropdown {
+        display:none;
+    }
+
+    .root:hover > .inner-dropdown{
+        display:block;
+    }
+    .root:hover > .inner-dropdown > .inner-dropdown{
+        display:block;
+        margin-left:148px;
+    }
+</style>

packages/Webkul/Shop/src/Resources/assets/js/components/imageSlider.vue

@@ -17,9 +17,6 @@ export default {
     return {
       images: [
         "vendor/webkul/shop/assets/images/banner.png",
-        "vendor/webkul/shop/assets/images/1.png",
-        "vendor/webkul/shop/assets/images/2.png",
-        "vendor/webkul/shop/assets/images/3.png"
       ],
       currentIndex: 0
     };

packages/Webkul/Shop/src/Resources/views/store/header/nav-menu/navmenu.blade.php

@@ -1,11 +1,14 @@
-<ul class="menu-bar">
+{{-- <ul class="menu-bar">
+    <category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
+    <li>
+        <img class="icon" src="vendor/webkul/shop/assets/images/offer-zone.svg" style="margin-right:5px;" />Offer Zone
+    </li>
     <li>Men</li>
     <li>Women</li>
     <li>Kids</li>
     <li>Accessories</li>
     <li>Home & Living</li>
-    <li>
-        <img class="icon" src="vendor/webkul/shop/assets/images/offer-zone.svg" style="margin-right:5px;" />Offer Zone
-    </li>
-    <nav-view></nav-view>
-</ul>
+
+</ul> --}}
+<category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
+{{-- <nav-view items='@json($categories)'></nav-view> --}}