From aa0e57abd0924fb5f0f6e365deb2f220fe41c002 Mon Sep 17 00:00:00 2001
From: FIlip Rakowski <frakowskI@divante.pl>
Date: Thu, 14 Sep 2017 14:11:21 +0200
Subject: [PATCH 1/2] New components, basic grid styling, microcart toggle
 behavior

---
 build/webpack.base.config.js                  |  2 +-
 src/components/core/ProductTile.vue           | 17 +++++++
 .../core/blocks/Microcart/Microcart.vue       | 16 +++++++
 src/event-bus/event-bus.js                    |  6 +++
 src/index.template.html                       |  2 +
 src/pages/Home.vue                            | 15 ++-----
 src/themes/default/App.vue                    | 30 ++++++++++---
 .../default/components/core/ProductTile.vue   | 18 ++++++++
 .../default/components/core/SearchIcon.vue    | 17 +++++++
 .../core/blocks/Header/HamburgerIcon.vue      | 17 +++++++
 .../components/core/blocks/Header/Header.vue  | 33 +++++++++++---
 .../core/blocks/Header/MicrocartIcon.vue      | 13 ++++--
 .../core/blocks/Header/WishlistIcon.vue       | 15 +++++++
 .../core/blocks/Microcart/Microcart.vue       | 45 +++++++++++++++++++
 src/themes/default/css/margin.css             |  4 ++
 src/themes/default/pages/Home.vue             | 31 ++++++-------
 16 files changed, 235 insertions(+), 46 deletions(-)
 create mode 100644 src/components/core/ProductTile.vue
 create mode 100644 src/components/core/blocks/Microcart/Microcart.vue
 create mode 100644 src/event-bus/event-bus.js
 create mode 100644 src/themes/default/components/core/ProductTile.vue
 create mode 100644 src/themes/default/components/core/SearchIcon.vue
 create mode 100644 src/themes/default/components/core/blocks/Header/HamburgerIcon.vue
 create mode 100644 src/themes/default/components/core/blocks/Header/WishlistIcon.vue
 create mode 100644 src/themes/default/components/core/blocks/Microcart/Microcart.vue
 create mode 100644 src/themes/default/css/margin.css

diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js
index 913ec3ebad..7278a6d534 100755
--- a/build/webpack.base.config.js
+++ b/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'),
diff --git a/src/components/core/ProductTile.vue b/src/components/core/ProductTile.vue
new file mode 100644
index 0000000000..48c78af275
--- /dev/null
+++ b/src/components/core/ProductTile.vue
@@ -0,0 +1,17 @@
+<template>
+  <div id="product-tile">
+    Core Product Tile
+  </div>
+</template>
+
+<script>
+import AddToCart from './AddToCart.vue'
+
+export default {
+  name: 'product-tile',
+  props: ['product'],
+  components: {
+    AddToCart
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/core/blocks/Microcart/Microcart.vue b/src/components/core/blocks/Microcart/Microcart.vue
new file mode 100644
index 0000000000..4e81255c9a
--- /dev/null
+++ b/src/components/core/blocks/Microcart/Microcart.vue
@@ -0,0 +1,16 @@
+<template>
+  
+</template>
+
+<script>
+export default {
+  name: 'microcart',
+  props: ['product'],
+  computed: {
+    cartItems () {
+      return this.$store.state.cart.items
+    }
+  }
+}
+</script>
+
diff --git a/src/event-bus/event-bus.js b/src/event-bus/event-bus.js
new file mode 100644
index 0000000000..0d122e8a95
--- /dev/null
+++ b/src/event-bus/event-bus.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+
+const EventBus = new Vue()
+
+export default EventBus
+
diff --git a/src/index.template.html b/src/index.template.html
index 45015e1b05..00e18d7dfa 100755
--- a/src/index.template.html
+++ b/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)$/)) { %>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index d8d6279d5d..29a7994c47 100755
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,29 +1,20 @@
 <template>
   <div id="hp">
-      Hello World!
+      Core Home
   </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
-import AddToCart from '../components/core/AddToCart.vue'
+import ProductTile from '../components/core/ProductTile.vue'
 
 export default {
   name: 'Home',
-  methods: {
-    ...mapActions(['search'])
-  },
   beforeMount () {
     this.$store.dispatch('loadCart')
     this.search()
   },
-  data () {
-    return {
-      'exampleData': 'Data from base component'
-    }
-  },
   components: {
-    AddToCart
+    ProductTile
   }
 }
 </script>
diff --git a/src/themes/default/App.vue b/src/themes/default/App.vue
index e9159f6d04..01fc7a123a 100755
--- a/src/themes/default/App.vue
+++ b/src/themes/default/App.vue
@@ -1,8 +1,13 @@
 <template>
   <div id="app">
-     <main-header />
-     <router-view></router-view>
-     <main-footer />
+    <div id="viewport">
+      <microcart />
+      <div class="container">
+        <main-header />
+        <router-view></router-view>
+        <main-footer />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,12 +15,27 @@
 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'
+
 export default {
   components: {
     MainHeader,
-    MainFooter
+    MainFooter,
+    Microcart
   }
 }
 </script>
-
 <style src="./css/grid.css"></style>
+<style src="./css/margin.css"></style>
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+#viewport {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  overflow-x: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
new file mode 100644
index 0000000000..6efccebbc2
--- /dev/null
+++ b/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>
diff --git a/src/themes/default/components/core/SearchIcon.vue b/src/themes/default/components/core/SearchIcon.vue
new file mode 100644
index 0000000000..0e6e87d304
--- /dev/null
+++ b/src/themes/default/components/core/SearchIcon.vue
@@ -0,0 +1,17 @@
+<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>
diff --git a/src/themes/default/components/core/blocks/Header/HamburgerIcon.vue b/src/themes/default/components/core/blocks/Header/HamburgerIcon.vue
new file mode 100644
index 0000000000..7d5f48e9fe
--- /dev/null
+++ b/src/themes/default/components/core/blocks/Header/HamburgerIcon.vue
@@ -0,0 +1,17 @@
+<template>
+    <div id="hamburger-icon">    
+        <i class="material-icons md-18">dehaze</i>
+    </div>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+
+export default {
+  mixins: [coreComponent('core/blocks/Header/HamburgerIcon')]
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/themes/default/components/core/blocks/Header/Header.vue b/src/themes/default/components/core/blocks/Header/Header.vue
index 8c0482f0ff..f9bcfaf495 100644
--- a/src/themes/default/components/core/blocks/Header/Header.vue
+++ b/src/themes/default/components/core/blocks/Header/Header.vue
@@ -1,11 +1,24 @@
 <template>
     <div id="header">
-        Header
-        <logo />
-        <search-icon />
-        <microcart-icon />
-        <hamburger-icon />
-        <wishlist-icon />
+        <div class="row middle-md">
+            <div class="col-md-1">
+                <div class="box">
+                    <hamburger-icon />
+                </div>
+            </div>
+            <div class="col-md-9 center-md">
+                <div class="box">              
+                    <logo />
+                </div>
+            </div>
+            <div class="col-md-2 center-md">
+                <div class="box">
+                    <search-icon class="mx10" />
+                    <wishlist-icon class="mx10" />         
+                    <microcart-icon class="mx10" />
+                </div>
+            </div>
+        </div>
         <ul>
             <li>
                 <router-link to="/" exact>Home</router-link>
@@ -17,10 +30,16 @@
 <script>
 import { coreComponent } from 'lib/themes'
 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
   },
   mixins: [coreComponent('core/blocks/Header/Header')]
 }
diff --git a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
index 68c32da15e..d680897efc 100644
--- a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
+++ b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
@@ -1,13 +1,20 @@
 <template>
-    <div id="microcart-icon">
-        Microcart
-    </div>
+  <span @click="toggleMicrocart">
+    <i class="material-icons md-18">shopping_cart</i>
+    {{ info}}
+  </span>
 </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>
diff --git a/src/themes/default/components/core/blocks/Header/WishlistIcon.vue b/src/themes/default/components/core/blocks/Header/WishlistIcon.vue
new file mode 100644
index 0000000000..1251e4cfcd
--- /dev/null
+++ b/src/themes/default/components/core/blocks/Header/WishlistIcon.vue
@@ -0,0 +1,15 @@
+<template> 
+    <i class="material-icons md-18">favorite_border</i>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+
+export default {
+  mixins: [coreComponent('core/blocks/Header/WishlistIcon')]
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
new file mode 100644
index 0000000000..e183efe627
--- /dev/null
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -0,0 +1,45 @@
+<template>
+  <div id="microcart" :class="{ active: isOpen }">
+      <ul>
+        <li v-for='product in cartItems'>
+          {{ product._source.name[0] }} - {{ product._source.price[0].price }}  - x{{ product.quantity }}
+        </li>
+      </ul>    
+    </div>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+import EventBus from 'src/event-bus/event-bus'
+
+export default {
+  data () {
+    return {
+      isOpen: true
+    }
+  },
+  created () {
+    const self = this
+    EventBus.$on('toggle-microcart', function () {
+      self.isOpen = !self.isOpen
+    })
+  },
+  mixins: [coreComponent('core/blocks/Microcart/Microcart')]
+}
+</script>
+
+<style scoped>
+#microcart {
+    position: absolute;
+    height: 100vh;
+    width: 200px;
+    background: black;
+    top: 0;
+    color: white;
+    right: -200px;
+}
+#microcart.active {
+    right: 0;
+
+}
+</style>
diff --git a/src/themes/default/css/margin.css b/src/themes/default/css/margin.css
new file mode 100644
index 0000000000..fe59b91ceb
--- /dev/null
+++ b/src/themes/default/css/margin.css
@@ -0,0 +1,4 @@
+.mx10 {
+    margin-left: 10px;
+    margin-right: 10px;
+}
\ No newline at end of file
diff --git a/src/themes/default/pages/Home.vue b/src/themes/default/pages/Home.vue
index c4b029e399..3949b59c98 100755
--- a/src/themes/default/pages/Home.vue
+++ b/src/themes/default/pages/Home.vue
@@ -1,25 +1,21 @@
 <template>
-  <div id='hp'>
-    Products:
-    <ul id='example-1'>
-      <li v-for='product in products'>
-        {{ product._source.name[0] }} - {{ product._source.price[0].price }} <add-to-cart :product="product" />
-      </li>
-    </ul>
-    
-    Cart:
-    <ul id='example-2'>
-      <li v-for='product in cartItems'>
-        {{ product._source.name[0] }} - {{ product._source.price[0].price }}  - x{{ product.quantity }}
-      </li>
-    </ul>    
+  <div id="home">
+
+    <div class="row">
+      <div class="col-md-12">
+          <h2>Everything new</h2>
+      </div>
+    </div>
+    <div class="row">
+      <product-tile v-for='product in products' :product="product"/>
+    </div>
 
   </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
 import { corePage } from 'lib/themes'
+import ProductTile from '../components/core/ProductTile.vue'
 
 export default {
   computed: {
@@ -401,14 +397,13 @@ export default {
       ]
     }
   },
-  methods: {
-    ...mapActions(['addToCart'])
+  components: {
+    ProductTile
   },
   mixins: [corePage('Home')]
 }
 </script>
 
-<!-- Add 'scoped' attribute to limit CSS to this component only -->
 <style scoped>
 
 </style>

From 3d9f31c88184934adae90e5b49210528afcb6f31 Mon Sep 17 00:00:00 2001
From: FIlip Rakowski <frakowskI@divante.pl>
Date: Fri, 15 Sep 2017 16:21:44 +0200
Subject: [PATCH 2/2] Header styling and reactivity

---
 src/components/core/AddToCart.vue             |  2 +-
 src/components/core/ProductTile.vue           |  4 ++
 .../core/blocks/Microcart/Microcart.vue       | 10 +++-
 .../core/blocks/SidebarMenu/SidebarMenu.vue   | 11 ++++
 src/themes/default/App.vue                    | 12 ++++-
 src/themes/default/components/core/Logo.vue   | 51 +++++++++++++++++++
 .../default/components/core/SearchIcon.vue    |  2 -
 .../core/blocks/Header/HamburgerIcon.vue      | 13 +++--
 .../components/core/blocks/Header/Header.vue  | 33 +++++++-----
 .../core/blocks/Header/MicrocartIcon.vue      | 10 ++--
 .../core/blocks/Microcart/Microcart.vue       | 15 +++---
 .../core/blocks/SidebarMenu/SidebarMenu.vue   | 47 +++++++++++++++++
 src/themes/default/css/padding.css            |  6 +++
 src/themes/default/pages/Home.vue             |  1 +
 14 files changed, 185 insertions(+), 32 deletions(-)
 create mode 100644 src/components/core/blocks/SidebarMenu/SidebarMenu.vue
 create mode 100644 src/themes/default/components/core/Logo.vue
 create mode 100644 src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
 create mode 100644 src/themes/default/css/padding.css

diff --git a/src/components/core/AddToCart.vue b/src/components/core/AddToCart.vue
index 2b0e732dd3..56fc6da0e2 100644
--- a/src/components/core/AddToCart.vue
+++ b/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>
 
diff --git a/src/components/core/ProductTile.vue b/src/components/core/ProductTile.vue
index 48c78af275..cf816ac7a0 100644
--- a/src/components/core/ProductTile.vue
+++ b/src/components/core/ProductTile.vue
@@ -1,6 +1,10 @@
 <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>
 
diff --git a/src/components/core/blocks/Microcart/Microcart.vue b/src/components/core/blocks/Microcart/Microcart.vue
index 4e81255c9a..e96f1d96d0 100644
--- a/src/components/core/blocks/Microcart/Microcart.vue
+++ b/src/components/core/blocks/Microcart/Microcart.vue
@@ -1,5 +1,13 @@
 <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>
diff --git a/src/components/core/blocks/SidebarMenu/SidebarMenu.vue b/src/components/core/blocks/SidebarMenu/SidebarMenu.vue
new file mode 100644
index 0000000000..6eb20062a0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/themes/default/App.vue b/src/themes/default/App.vue
index 01fc7a123a..6d0a2d1971 100755
--- a/src/themes/default/App.vue
+++ b/src/themes/default/App.vue
@@ -2,9 +2,14 @@
   <div id="app">
     <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>
@@ -16,17 +21,22 @@ 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,
-    Microcart
+    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;
diff --git a/src/themes/default/components/core/Logo.vue b/src/themes/default/components/core/Logo.vue
new file mode 100644
index 0000000000..acf5b3051f
--- /dev/null
+++ b/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>
diff --git a/src/themes/default/components/core/SearchIcon.vue b/src/themes/default/components/core/SearchIcon.vue
index 0e6e87d304..46c14bf554 100644
--- a/src/themes/default/components/core/SearchIcon.vue
+++ b/src/themes/default/components/core/SearchIcon.vue
@@ -1,7 +1,5 @@
 <template>
-    
     <i class="material-icons md-18">search</i>
-    
 </template>
 
 <script>
diff --git a/src/themes/default/components/core/blocks/Header/HamburgerIcon.vue b/src/themes/default/components/core/blocks/Header/HamburgerIcon.vue
index 7d5f48e9fe..b327a354f9 100644
--- a/src/themes/default/components/core/blocks/Header/HamburgerIcon.vue
+++ b/src/themes/default/components/core/blocks/Header/HamburgerIcon.vue
@@ -1,17 +1,24 @@
 <template>
-    <div id="hamburger-icon">    
+    <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>
diff --git a/src/themes/default/components/core/blocks/Header/Header.vue b/src/themes/default/components/core/blocks/Header/Header.vue
index f9bcfaf495..7199038f22 100644
--- a/src/themes/default/components/core/blocks/Header/Header.vue
+++ b/src/themes/default/components/core/blocks/Header/Header.vue
@@ -1,34 +1,32 @@
 <template>
     <div id="header">
         <div class="row middle-md">
-            <div class="col-md-1">
+            <div class="col-md-1 middle-md">
                 <div class="box">
-                    <hamburger-icon />
+                    <hamburger-icon class="p15 icon"/>
                 </div>
             </div>
             <div class="col-md-9 center-md">
                 <div class="box">              
-                    <logo />
+                    <logo width="65px" height="30px" class="p5"/>
                 </div>
             </div>
-            <div class="col-md-2 center-md">
+            <div class="col-md-2 end-md">
                 <div class="box">
-                    <search-icon class="mx10" />
-                    <wishlist-icon class="mx10" />         
-                    <microcart-icon class="mx10" />
+                    <search-icon class="p15 icon" />
+                    <wishlist-icon class="p15 icon" />         
+                    <microcart-icon class="p15 icon" />
                 </div>
             </div>
         </div>
-        <ul>
-            <li>
-                <router-link to="/" exact>Home</router-link>
-            </li>
-        </ul>
     </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'
@@ -39,12 +37,19 @@ export default {
     MicrocartIcon,
     HamburgerIcon,
     WishlistIcon,
-    SearchIcon
+    SearchIcon,
+    Logo
   },
   mixins: [coreComponent('core/blocks/Header/Header')]
 }
 </script>
 
 <style scoped>
-
+    #header .icon:hover {
+        background-color: #F2F2F2;
+        cursor: pointer;
+    }
+    #header .logo {
+        height: 300px;
+    }
 </style>
diff --git a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
index d680897efc..94176cb99a 100644
--- a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
+++ b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue
@@ -1,8 +1,8 @@
 <template>
-  <span @click="toggleMicrocart">
+  <div id="microcart-icon" @click="toggleMicrocart">
     <i class="material-icons md-18">shopping_cart</i>
-    {{ info}}
-  </span>
+    {{ info }}
+  </div>
 </template>
 
 <script>
@@ -20,5 +20,7 @@ export default {
 </script>
 
 <style scoped>
-
+  #microcart-icon {
+    display: inline-flex;
+  }
 </style>
diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
index e183efe627..2db4a27132 100644
--- a/src/themes/default/components/core/blocks/Microcart/Microcart.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -1,10 +1,11 @@
 <template>
   <div id="microcart" :class="{ active: isOpen }">
+      <div class="material-icons close" @click="isOpen = false">close</div>
       <ul>
         <li v-for='product in cartItems'>
           {{ product._source.name[0] }} - {{ product._source.price[0].price }}  - x{{ product.quantity }}
         </li>
-      </ul>    
+      </ul>
     </div>
 </template>
 
@@ -15,12 +16,12 @@ import EventBus from 'src/event-bus/event-bus'
 export default {
   data () {
     return {
-      isOpen: true
+      isOpen: false
     }
   },
   created () {
     const self = this
-    EventBus.$on('toggle-microcart', function () {
+    EventBus.$on('toggle-microcart', () => {
       self.isOpen = !self.isOpen
     })
   },
@@ -32,14 +33,16 @@ export default {
 #microcart {
     position: absolute;
     height: 100vh;
-    width: 200px;
+    width: 600px;
     background: black;
     top: 0;
     color: white;
-    right: -200px;
+    right: -600px;
 }
 #microcart.active {
     right: 0;
-
+}
+#microcart .close {
+  cursor: pointer
 }
 </style>
diff --git a/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue b/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
new file mode 100644
index 0000000000..bcef74f1a4
--- /dev/null
+++ b/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
@@ -0,0 +1,47 @@
+<template>
+    <div id="sidebar-menu" :class="{ active: isOpen }">
+        <div class="material-icons close" @click="isOpen = false">close</div>
+        <ul>
+            <li>
+                <router-link to="/" exact>Home</router-link>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { coreComponent } from 'lib/themes'
+import EventBus from 'src/event-bus/event-bus'
+
+export default {
+  data () {
+    return {
+      isOpen: false
+    }
+  },
+  created () {
+    const self = this
+    EventBus.$on('toggle-sidebar-menu', () => {
+      self.isOpen = !self.isOpen
+    })
+  },
+  mixins: [coreComponent('core/blocks/SidebarMenu/SidebarMenu')]
+}
+</script>
+
+<style scoped>
+#sidebar-menu {
+    position: absolute;
+    height: 100vh;
+    width: 350px;
+    background: #F2F2F2;
+    top: 0;
+    left: -350px;
+}
+#sidebar-menu.active {
+    left: 0;
+}
+#sidebar-menu .close {
+    cursor: pointer
+}
+</style>
diff --git a/src/themes/default/css/padding.css b/src/themes/default/css/padding.css
new file mode 100644
index 0000000000..f0aa77b895
--- /dev/null
+++ b/src/themes/default/css/padding.css
@@ -0,0 +1,6 @@
+.p5 {
+    padding: 5px;
+}
+.p15 {
+    padding: 15px;
+}
\ No newline at end of file
diff --git a/src/themes/default/pages/Home.vue b/src/themes/default/pages/Home.vue
index 3949b59c98..11c8bfb577 100755
--- a/src/themes/default/pages/Home.vue
+++ b/src/themes/default/pages/Home.vue
@@ -6,6 +6,7 @@
           <h2>Everything new</h2>
       </div>
     </div>
+    
     <div class="row">
       <product-tile v-for='product in products' :product="product"/>
     </div>