Add sidebar transitions

client/src/components/book-navigation/NavigationSidebar.vue

@@ -1,4 +1,5 @@
 <template>
+  <transition name="slide">
     <div
       v-click-outside="close"
       class="navigation-sidebar"
@@ -13,6 +14,7 @@
         <cross class="navigation-sidebar__close-icon"/>
       </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>

client/src/components/profile/ProfileSidebar.vue

@@ -1,4 +1,5 @@
 <template>
+  <transition name="slide">
     <div
       v-click-outside="close"
       class="profile-sidebar"
@@ -49,6 +50,7 @@
         </p>
       </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>