From c0f6ab543b863bcbe8d3db64b6b9567f93911142 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 18 Jun 2020 17:25:08 +0200
Subject: [PATCH] Add sidebar transitions

---
 .../book-navigation/NavigationSidebar.vue     |  43 +++++---
 .../src/components/profile/ProfileSidebar.vue | 103 ++++++++++--------
 2 files changed, 90 insertions(+), 56 deletions(-)

diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 81702957..ba6b5da8 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -1,18 +1,20 @@
 <template>
-  <div
-    v-click-outside="close"
-    class="navigation-sidebar"
-    v-if="sidebar.navigation"
-  >
-    <content-navigation
-      :is-sidebar="true"
-      class="navigation-sidebar__main"/>
+  <transition name="slide">
     <div
-      class="navigation-sidebar__close-button"
-      @click="close">
-      <cross class="navigation-sidebar__close-icon"/>
+      v-click-outside="close"
+      class="navigation-sidebar"
+      v-if="sidebar.navigation"
+    >
+      <content-navigation
+        :is-sidebar="true"
+        class="navigation-sidebar__main"/>
+      <div
+        class="navigation-sidebar__close-button"
+        @click="close">
+        <cross class="navigation-sidebar__close-icon"/>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -53,6 +55,8 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
+  $desktop-width: 285px;
+
   .navigation-sidebar {
     position: fixed;
     left: 0;
@@ -81,7 +85,7 @@
     overflow-y: auto;
 
     @include desktop {
-      width: 285px;
+      width: $desktop-width;
     }
 
     &__main {
@@ -100,4 +104,17 @@
       cursor: pointer;
     }
   }
+
+  .slide {
+    &-enter-active, &-leave-active {
+      transition: left 0.2s;
+    }
+
+    &-enter, &-leave-to {
+      left: -100vw;
+      @include desktop {
+        left: -$desktop-width;
+      }
+    }
+  }
 </style>
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index fd4f237c..8961e962 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -1,54 +1,56 @@
 <template>
-  <div
-    v-click-outside="close"
-    class="profile-sidebar"
-    v-if="sidebar.profile">
-    <a
-      class="profile-sidebar__close-link"
-      @click="close">
-      <cross class="profile-sidebar__close-icon"/>
-    </a>
-    <div class="profile-sidebar__section">
-      <profile-widget class="profile-sidebar__item"/>
-      <div
-        class="profile-sidebar__item"
+  <transition name="slide">
+    <div
+      v-click-outside="close"
+      class="profile-sidebar"
+      v-if="sidebar.profile">
+      <a
+        class="profile-sidebar__close-link"
         @click="close">
-        <router-link
-          to="/me/activity"
-          class="profile-sidebar__link">Meine Aktivitäten
-        </router-link>
-      </div>
-    </div>
-    <div class="profile-sidebar__section">
-      <div class="profile-sidebar__item">
-        <class-selection-widget/>
-        <div @click="close">
+        <cross class="profile-sidebar__close-icon"/>
+      </a>
+      <div class="profile-sidebar__section">
+        <profile-widget class="profile-sidebar__item"/>
+        <div
+          class="profile-sidebar__item"
+          @click="close">
           <router-link
-            :to="{name: 'my-class'}"
-            class="profile-sidebar__link">Klassenliste
+            to="/me/activity"
+            class="profile-sidebar__link">Meine Aktivitäten
           </router-link>
         </div>
       </div>
-    </div>
-    <div class="profile-sidebar__section">
-      <div
-        class="profile-sidebar__item"
-        @click="close">
-        <router-link
-          :to="{name:'join-class'}"
-          data-cy="join-class-link"
-          class="profile-sidebar__link">Zugangscode
-        </router-link>
-      </div>
-      <div class="profile-sidebar__item">
-        <logout-widget/>
+      <div class="profile-sidebar__section">
+        <div class="profile-sidebar__item">
+          <class-selection-widget/>
+          <div @click="close">
+            <router-link
+              :to="{name: 'my-class'}"
+              class="profile-sidebar__link">Klassenliste
+            </router-link>
+          </div>
+        </div>
       </div>
+      <div class="profile-sidebar__section">
+        <div
+          class="profile-sidebar__item"
+          @click="close">
+          <router-link
+            :to="{name:'join-class'}"
+            data-cy="join-class-link"
+            class="profile-sidebar__link">Zugangscode
+          </router-link>
+        </div>
+        <div class="profile-sidebar__item">
+          <logout-widget/>
+        </div>
 
-      <p class="profile-sidebar__support">
-        Supportanfragen: rahel.wenger@hep-verlag.ch
-      </p>
+        <p class="profile-sidebar__support">
+          Supportanfragen: rahel.wenger@hep-verlag.ch
+        </p>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -83,6 +85,8 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
+  $desktop-width: 333px;
+
   .profile-sidebar {
     padding: $large-spacing 0;
     box-sizing: border-box;
@@ -98,7 +102,7 @@
 
     width: 100%;
     @include desktop {
-      width: 333px;
+      width: $desktop-width;
     }
 
     display: flex;
@@ -141,4 +145,17 @@
       color: $color-silver-dark;
     }
   }
+
+  .slide {
+    &-enter-active, &-leave-active {
+      transition: right 0.2s;
+    }
+
+    &-enter, &-leave-to {
+      right: -100vw;
+      @include desktop {
+        right: -$desktop-width;
+      }
+    }
+  }
 </style>