Header styling + sidebars reactivity

build/webpack.base.config.js

@@ -15,7 +15,7 @@ module.exports = {
       core_pages: path.resolve(__dirname, '../src/pages'),
       core_components: path.resolve(__dirname, '../src/components'),
       core_themes: path.resolve(__dirname, '../src/themes'),
-
+      
       lib: path.resolve(__dirname, '../src/lib'),
 
       'src': path.resolve(__dirname, '../src'),

src/components/core/AddToCart.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- Add to cart button example with addToCart action -->
+    <!-- Add to cart button example with addToCart action from cart store-->
     <button v-on:click="addToCart(product)">Add to cart</button>
 </template>
 

src/components/core/ProductTile.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="product-tile">
+    Core Product Tile
+    <!-- Product name and price -->
+    {{ product._source.name[0] }} - {{ product._source.price[0].price }} 
+    <!-- Add to cart button. Pass whole product as prop -->
+    <add-to-cart :product="product" /> 
+  </div>
+</template>
+
+<script>
+import AddToCart from './AddToCart.vue'
+
+export default {
+  name: 'product-tile',
+  props: ['product'],
+  components: {
+    AddToCart
+  }
+}
+</script>

src/components/core/blocks/Microcart/Microcart.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="microcart">
+    Core Microcart
+    <!-- Items in cart displayed as a list with quantitys for each item -->
+    <ul>
+      <li v-for='product in cartItems'>
+        {{ product._source.name[0] }} - {{ product._source.price[0].price }}  - x{{ product.quantity }}
+      </li>
+    </ul>  
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'microcart',
+  props: ['product'],
+  computed: {
+    cartItems () {
+      return this.$store.state.cart.items
+    }
+  }
+}
+</script>
+

src/components/core/blocks/SidebarMenu/SidebarMenu.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="sidebar-menu">
+    Core Sidebar Menu
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'sidebar-menu'
+}
+</script>

src/event-bus/event-bus.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+
+const EventBus = new Vue()
+
+export default EventBus
+

src/index.template.html

@@ -6,6 +6,8 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
     <meta name="theme-color" content="#f60">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
     <% for (var chunk of webpack.chunks) {
         for (var file of chunk.files) {
           if (file.match(/\.(js|css)$/)) { %>

src/pages/Home.vue

@@ -1,25 +1,20 @@
 <template>
   <div id="hp">
-      Hello World!
+      Core Home
   </div>
 </template>
 
 <script>
-import AddToCart from '../components/core/AddToCart.vue'
+import ProductTile from '../components/core/ProductTile.vue'
 
 export default {
   name: 'Home',
-  created () {
-    this.$store.dispatch('cart/loadCart')
-    this.$store.dispatch('catalog/loadCategories')
-  },
-  data () {
-    return {
-      'exampleData': 'Data from base component'
-    }
+  beforeMount () {
+    this.$store.dispatch('loadCart')
+    this.search()
   },
   components: {
-    AddToCart
+    ProductTile
   }
 }
 </script>

src/themes/default/App.vue

@@ -1,21 +1,51 @@
 <template>
   <div id="app">
-     <main-header />
-     <router-view></router-view>
-     <main-footer />
+    <div id="viewport">
+      <microcart />
+      <sidebar-menu />
+      <div class="container">
+        <main-header />
+      </div>
+      <div class="container">
+        <router-view></router-view>
+      </div>
+      <div class="container">
+        <main-footer />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import MainHeader from './components/core/blocks/Header/Header.vue'
 import MainFooter from './components/core/blocks/Footer/Footer.vue'
 
+import Microcart from './components/core/blocks/Microcart/Microcart.vue'
+import SidebarMenu from './components/core/blocks/SidebarMenu/SidebarMenu.vue'
+
 export default {
   components: {
     MainHeader,
-    MainFooter
+    MainFooter,
+    Microcart,
+    SidebarMenu
   }
 }
 </script>
 
 <style src="./css/grid.css"></style>
+<style src="./css/margin.css"></style>
+<style src="./css/padding.css"></style>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+#viewport {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+}
+</style>

src/themes/default/components/core/Logo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="logo">
+    <svg version="1.1" id="svg2811" xmlns:svg="http://www.w3.org/2000/svg"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="width"
+	 :height="height" viewBox="10.63 8.863 708.662 467.493" enable-background="new 10.63 8.863 708.662 467.493"
+	 xml:space="preserve">
+        <g id="layer1" transform="translate(-4397.099,-577.1118)">
+            <g id="g45263" transform="translate(10.62987,8.863696)">
+                <path id="path45125" fill="#CC071E" d="M4895.119,591.292c25.74-12.642,38.496-10.983,38.783,1.831
+                    c0.344,16.646-2.117,38.782-3.891,54.799c-9.553,87.055-25.512,158.191-26.713,247.574
+                    c42.043-108.843,77.279-184.492,122.697-277.662c14.416-29.688,23.625-24.139,35.465-29.402
+                    c46.105-20.535,47.822-7.951,41.814,17.161c-22.365,93.01-79.625,385.858-88.375,430.951c-2.518,13.047-16.703,7.516-20.365,2.414
+                    c-16.416-22.709-34.949-23.064-32.891-38.165c10.297-75.181,47.363-263.808,57.031-308.254
+                    c-49.252,100.972-100.332,227.199-126.588,298.77c-5.549,15.198-15.674,14.083-21.965,2.963
+                    c-8.867-15.621-26.084-23.596-28.945-42.055c-8.98-58.688,10.297-170.552,12.984-241.322
+                    c-26.826,77.308-71.844,227.399-91.579,295.211c-8.122,28.058-35.236,23.481-28.029-3.866
+                    c29.973-113.803,94.555-315.078,122.469-387.438C4863.602,597.755,4880.818,598.327,4895.119,591.292"/>
+                <path id="path45127" fill="#CC071E" d="M4731.637,577.334c-8.694-2.116-33.92,11.498-49.422,14.186
+                    c-4.919,0.858-9.61,6.063-11.269,9.782c-24.826,57.03-47.077,111.394-66.354,160.919c-24.654,4.21-53.483,9.753-85.745,17
+                    c23.109-59.278,46.448-117.744,69.214-173.973c11.211-27.686-18.304-30.317-29.745-2.288
+                    c-14.873,36.438-42.73,104.708-73.562,184.281c-22.652,5.554-46.676,11.903-71.788,19.157
+                    c-18.248,5.268-18.991,10.13-11.097,21.073c4.347,6.093,13.328,5.479,17.446,9.821c10.64,11.252,17.104,24.711,36.151,26.748
+                    c-16.989,45.446-33.978,92.312-49.365,137.438c-9.667,28.326,17.847,34.12,28.43,4.146c17.046-48.318,35.007-97.22,53.483-145.978
+                    c15.387-3.576,52.625-11.596,87.003-19.055c-27.285,74.785-45.247,131.581-52.053,159.227c-1.258,5.319,0.858,8.271,2.002,10.439
+                    c9.209,13.402,17.961,13.951,29.802,30.522c3.204,4.519,13.958,6.956,17.618-4.17c25.283-76.37,51.31-148.026,75.563-212.264
+                    c10.067-2.202,28.2-6.578,39.297-23.138c19.734-29.391,25.397-23.43,30.146-32.365c5.949-11.217,2.001-21.748-19.048-19.146
+                    c0,0-7.951,0.566-22.652,2.242c23.338-60.09,43.759-111.057,58.46-149.896C4739.188,588.889,4739.817,579.279,4731.637,577.334"/>
+                <path id="path45129" fill="#CC071E" d="M4697.202,967.071c5.434,13.734,22.423,9.575,15.959-7.001
+                    c-6.579-16.887-22.938-67.722-27.229-84.099c-5.834-22.068,19.449-16.033,6.636-1.606c-10.982,12.406-18.305,17.377-38.611,40.967
+                    c-19.62,22.772-14.3,52.323,6.693,58.85c23.681,7.367,44.56-18.728,57.487-37.873c12.527-18.539,0.4-29.413-12.241-18.453
+                    c-8.123,7.047-17.504,17.869-27,23.704c-7.722,4.696-13.786-0.349-3.489-14.523c11.955-16.411,25.34-30.162,35.293-45.67
+                    c20.307-31.604-19.849-49.822-37.124-29.293c-9.267,10.943-6.921,21.686-4.404,30.906
+                    C4673.234,897.749,4688.335,944.895,4697.202,967.071"/>
+            </g>
+        </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+
+export default {
+  props: ['width', 'height'],
+  mixins: [coreComponent('core/Logo')]
+}
+</script>
+
+<style scoped>
+
+</style>

src/themes/default/components/core/ProductTile.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="col-md-3">
+    {{ product._source.name[0] }} - {{ product._source.price[0].price }} 
+    <add-to-cart :product="product" /> 
+  </div>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+
+export default {
+  mixins: [coreComponent('core/ProductTile')]
+}
+</script>
+
+<style scoped>
+
+</style>

src/themes/default/components/core/SearchIcon.vue

@@ -0,0 +1,15 @@
+<template>
+    <i class="material-icons md-18">search</i>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+
+export default {
+  mixins: [coreComponent('core/SearchIcon')]
+}
+</script>
+
+<style scoped>
+
+</style>

src/themes/default/components/core/blocks/Header/HamburgerIcon.vue

@@ -0,0 +1,24 @@
+<template>
+    <div id="hamburger-icon" class="box" @click="toggleSidebarMenu">
+        <i class="material-icons md-18">dehaze</i>
+    </div>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+import EventBus from 'src/event-bus/event-bus'
+export default {
+  methods: {
+    toggleSidebarMenu () {
+      EventBus.$emit('toggle-sidebar-menu')
+    }
+  },
+  mixins: [coreComponent('core/blocks/Header/HamburgerIcon')]
+}
+</script>
+
+<style scoped>
+    #hamburger-icon {
+       display: inline-flex;
+    }
+</style>

src/themes/default/components/core/blocks/Header/Header.vue

@@ -1,31 +1,55 @@
 <template>
     <div id="header">
-        Header
-        <logo />
-        <search-icon />
-        <microcart-icon />
-        <hamburger-icon />
-        <wishlist-icon />
-        <ul>
-            <li>
-                <router-link to="/" exact>Home</router-link>
-            </li>
-        </ul>
+        <div class="row middle-md">
+            <div class="col-md-1 middle-md">
+                <div class="box">
+                    <hamburger-icon class="p15 icon"/>
+                </div>
+            </div>
+            <div class="col-md-9 center-md">
+                <div class="box">              
+                    <logo width="65px" height="30px" class="p5"/>
+                </div>
+            </div>
+            <div class="col-md-2 end-md">
+                <div class="box">
+                    <search-icon class="p15 icon" />
+                    <wishlist-icon class="p15 icon" />         
+                    <microcart-icon class="p15 icon" />
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import { coreComponent } from 'lib/themes'
+
+import Logo from '../../Logo.vue'
+
 import MicrocartIcon from './MicrocartIcon.vue'
+import HamburgerIcon from './HamburgerIcon.vue'
+import SearchIcon from '../../SearchIcon.vue'
+import WishlistIcon from './WishlistIcon.vue'
 
 export default {
   components: {
-    MicrocartIcon
+    MicrocartIcon,
+    HamburgerIcon,
+    WishlistIcon,
+    SearchIcon,
+    Logo
   },
   mixins: [coreComponent('core/blocks/Header/Header')]
 }
 </script>
 
 <style scoped>
-
+    #header .icon:hover {
+        background-color: #F2F2F2;
+        cursor: pointer;
+    }
+    #header .logo {
+        height: 300px;
+    }
 </style>

src/themes/default/components/core/blocks/Header/MicrocartIcon.vue

@@ -1,17 +1,26 @@
 <template>
-    <div id="microcart-icon">
-        Microcart
-    </div>
+  <div id="microcart-icon" @click="toggleMicrocart">
+    <i class="material-icons md-18">shopping_cart</i>
+    {{ info }}
+  </div>
 </template>
 
 <script>
 import { coreComponent } from 'lib/themes'
+import EventBus from 'src/event-bus/event-bus'
 
 export default {
+  methods: {
+    toggleMicrocart () {
+      EventBus.$emit('toggle-microcart')
+    }
+  },
   mixins: [coreComponent('core/blocks/Header/MicrocartIcon')]
 }
 </script>
 
 <style scoped>
-
+  #microcart-icon {
+    display: inline-flex;
+  }
 </style>