Added transition

owncloud · May 11, 2020 · b5c440d · b5c440d
1 parent 5ffd426
commit b5c440d
Showing 1 changed file with 21 additions and 11 deletions.
diff --git 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: {