From b11c505989cbb5d3d35d30f6ad34ad33120110e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20Fia=C5=82kiewicz?= <damian.fialkiewicz@snow.dog>
Date: Fri, 18 Jan 2019 15:52:23 +0100
Subject: [PATCH 1/3] Add missing slide transitions to search panel and sidebar
 menu

---
 .../core/blocks/SearchPanel/SearchPanel.vue   |  7 -----
 .../core/blocks/SidebarMenu/SidebarMenu.vue   | 11 +-------
 src/themes/default/layouts/Default.vue        | 26 ++++++++++++++++---
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue b/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue
index c6afa8811e..40d6716d01 100644
--- a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue
+++ b/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="searchpanel fixed mw-100 bg-cl-primary cl-accent"
-    :class="{ active: showPanel }"
     data-testid="searchPanel"
   >
     <div class="close-icon-row">
@@ -86,8 +85,6 @@ export default {
   top: 0;
   right: 0;
   z-index: 3;
-  transform: translateX(100%);
-  transition: transform 300ms $motion-main;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -143,10 +140,6 @@ export default {
     }
   }
 
-  &.active {
-    transform: translateX(0);
-  }
-
   .close-icon {
     padding: 18px 8px;
   }
diff --git a/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue b/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
index 6fd3d23071..0be4601fbe 100644
--- a/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
+++ b/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-menu fixed mw-100 bg-cl-secondary" :class="{ active: showMenu }">
+  <div class="sidebar-menu fixed mw-100 bg-cl-secondary">
     <div class="row brdr-bottom-1 brdr-cl-bg-secondary">
       <div class="col-xs bg-cl-primary" v-if="submenu.depth">
         <sub-btn type="back" class="bg-cl-transparent brdr-none" />
@@ -186,9 +186,6 @@ export default {
     },
     isCurrentMenuShowed () {
       return !this.getSubmenu || !this.getSubmenu.depth
-    },
-    showMenu () {
-      return this.isOpen && this.componentLoaded
     }
   },
   mounted () {
@@ -221,18 +218,12 @@ $color-mine-shaft: color(mine-shaft);
   left: 0;
   overflow: hidden;
   overflow-y: auto;
-  transform: translateX(-100%);
   z-index: 3;
-  transition: transform $duration-main $motion-main;
 
   @media (max-width: 767px) {
     width: 100vh;
   }
 
-  &.active {
-    transform: translateX(0);
-  }
-
   &__list {
     transition: transform $duration-main $motion-main;
   }
diff --git a/src/themes/default/layouts/Default.vue b/src/themes/default/layouts/Default.vue
index cfffaf975c..7301bce1d1 100644
--- a/src/themes/default/layouts/Default.vue
+++ b/src/themes/default/layouts/Default.vue
@@ -4,9 +4,13 @@
     <loader/>
     <div id="viewport" class="w-100 relative">
       <microcart v-if="isMicrocartOpen"/>
-      <search-panel v-if="isSearchPanelOpen"/>
+      <transition name="slide-left">
+        <search-panel v-if="isSearchPanelOpen"/>
+      </transition>
       <wishlist v-if="isWishlistOpen"/>
-      <sidebar-menu v-if="isSidebarOpen"/>
+      <transition name="slide-right">
+        <sidebar-menu v-if="isSidebarOpen"/>
+      </transition>
       <main-header/>
       <slot/>
       <main-footer/>
@@ -101,6 +105,22 @@ export default {
 }
 </script>
 
-<style lang="scss" src="theme/css/main.scss">
+<style lang="scss" src="theme/css/main.scss"></style>
+<style lang="scss" scoped>
+  .slide-left-enter-active,
+  .slide-left-leave-active,
+  .slide-right-enter-active,
+  .slide-right-leave-active {
+    transition: transform .25s;
+  }
+
+  .slide-left-enter,
+  .slide-left-leave-to {
+    transform: translateX(100%);
+  }
 
+  .slide-right-enter,
+  .slide-right-leave-to {
+    transform: translateX(-100%);
+  }
 </style>

From 493c65dad9bf69594aac573ee9368b127ff5f8f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20Fia=C5=82kiewicz?= <damian.fialkiewicz@snow.dog>
Date: Fri, 18 Jan 2019 15:58:02 +0100
Subject: [PATCH 2/3] Add slide animation to microcart and wishlist

---
 .../components/core/blocks/Microcart/Microcart.vue   | 12 +-----------
 src/themes/default/layouts/Default.vue               | 12 ++++++------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
index 694e8b6a90..7c1cdb25a3 100644
--- a/src/themes/default/components/core/blocks/Microcart/Microcart.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="microcart mw-100 fixed cl-accent"
-    :class="[productsInCart.length ? 'bg-cl-secondary' : 'bg-cl-primary', { active: showMicrocart }]"
+    :class="[productsInCart.length ? 'bg-cl-secondary' : 'bg-cl-primary']"
     data-testid="microcart"
   >
     <div class="row middle-xs bg-cl-primary top-sm">
@@ -146,11 +146,6 @@ export default {
       default: () => false
     }
   },
-  computed: {
-    showMicrocart () {
-      return this.isMicrocartOpen && this.componentLoaded
-    }
-  },
   mounted () {
     this.$nextTick(() => {
       this.componentLoaded = true
@@ -198,13 +193,8 @@ export default {
     height: 100%;
     width: 800px;
     min-width: 320px;
-    transform: translateX(100%);
-    transition: transform 300ms $motion-main;
     overflow-y: auto;
     overflow-x: hidden;
-    &.active {
-      transform: translateX(0)
-    }
   }
 
   .close {
diff --git a/src/themes/default/layouts/Default.vue b/src/themes/default/layouts/Default.vue
index 7301bce1d1..d3d3f2355e 100644
--- a/src/themes/default/layouts/Default.vue
+++ b/src/themes/default/layouts/Default.vue
@@ -3,15 +3,15 @@
     <overlay v-if="overlayActive"/>
     <loader/>
     <div id="viewport" class="w-100 relative">
-      <microcart v-if="isMicrocartOpen"/>
-      <transition name="slide-left">
-        <search-panel v-if="isSearchPanelOpen"/>
-      </transition>
-      <wishlist v-if="isWishlistOpen"/>
+      <main-header/>
       <transition name="slide-right">
         <sidebar-menu v-if="isSidebarOpen"/>
       </transition>
-      <main-header/>
+      <transition name="slide-left">
+        <microcart v-if="isMicrocartOpen"/>
+        <search-panel v-if="isSearchPanelOpen"/>
+        <wishlist v-if="isWishlistOpen"/>
+      </transition>
       <slot/>
       <main-footer/>
       <notification/>

From 5c703ff3520a4acca0d4e3a13c9eba51942d9c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20Fia=C5=82kiewicz?= <damian.fialkiewicz@snow.dog>
Date: Fri, 18 Jan 2019 16:02:04 +0100
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bc9552eaa7..2b4248a3b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Hotjar extension (#840)
+- Slide animations to menu, search, wishlist and minicart components
 
 ### Changed
 - IndexedDb changed to LocalStorage + ServiceWorker native caching (#2112)
@@ -29,10 +30,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - There is new config option `config.orders.directBackendSync` that changes the behavior of placing an order. Please do read  [more on this change](https://github.com/DivanteLtd/vue-storefront/commit/e73f2ca19a5d33a39f8b0fd6346543eced24167e) and [more on vue-storefront-api change](https://github.com/DivanteLtd/vue-storefront-api/commit/80c497f72362c72983db4fdcac14c8ba6f8729a8)
-- ProductSlider, ProductLinks, ProductListing moved to theme. 
+- ProductSlider, ProductLinks, ProductListing moved to theme.
 - Many theme-related logic moved to theme (+ deleted empty core components just with `name`)
 - Components required for backward compatibility moved to `compatibility` folder. For all this files you just need to add `compatibility` after `core` in import path to make them work like before.
-- Better Vuex extensibility with modules 
+- Better Vuex extensibility with modules
 - VSModule `store` object changed to fulfil need of multiple vuex modules (see modules docs)
 - UI Store logic for Microcart moved to cart module
 - Extensions are now depreciated, theme-level extensions removed and src-level extension to be depreciated in 1.7