From b5c440df717274783be781503cd397915ba510a9 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Mon, 11 May 2020 20:00:03 +0200
Subject: [PATCH] Added transition

---
 src/Phoenix.vue | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/Phoenix.vue b/src/Phoenix.vue
index 2b13e089b24..4cb24ef277d 100644
--- a/src/Phoenix.vue
+++ b/src/Phoenix.vue
@@ -6,17 +6,19 @@
         <router-view name="fullscreen" />
       </template>
       <div v-else key="core-content" class="uk-height-1-1 uk-flex uk-flex-row uk-flex-row">
-        <oc-sidebar
-          v-if="isSidebarVisible"
-          v-touch:swipe.left="handleNavSwipe"
-          class="oc-app-navigation"
-          :logo-img="logoImage"
-          :product-name="productName"
-          :nav-items="navItems"
-          :class="sidebarClasses"
-          :fixed="isSidebarFixed"
-          @closed="toggleAppNavigationVisibility"
-        />
+        <transition :name="appNavigationAnimation">
+          <oc-sidebar
+            v-if="isSidebarVisible"
+            v-touch:swipe.left="handleNavSwipe"
+            class="oc-app-navigation"
+            :logo-img="logoImage"
+            :product-name="productName"
+            :nav-items="navItems"
+            :class="sidebarClasses"
+            :fixed="isSidebarFixed"
+            @close="toggleAppNavigationVisibility"
+          />
+        </transition>
         <div class="uk-width-expand">
           <top-bar
             class="uk-width-expand"
@@ -140,6 +142,14 @@ export default {
 
     isSidebarVisible() {
       return this.windowWidth >= 1200 || this.appNavigationVisible
+    },
+
+    appNavigationAnimation() {
+      if (this.windowWidth > 960) {
+        return 'push-right'
+      }
+
+      return 'fade'
     }
   },
   watch: {