feat: introduce animations

assets/scss/styles.scss

@@ -1,4 +1,4 @@
-$responsiveWidth: 768px;
+$responsiveWidth: 767px;
 
 *,
 *::before,
@@ -52,6 +52,7 @@ body {
   @apply transition-colors;
   @apply ease-in-out;
   @apply duration-150;
+  @apply overflow-x-hidden;
 
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;

components/app/Header.vue

@@ -300,8 +300,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$responsiveWidth: 768px;
-
 .logo {
   @apply text-xl;
   @apply transition-colors;

components/app/Sidenav.vue

@@ -1,4 +1,5 @@
 <template>
+  <TranslateSlideRight appear>
     <aside class="nav-first">
       <nav class="primary-nav">
         <!--
@@ -120,6 +121,7 @@
         </a>
       </nav>
     </aside>
+  </TranslateSlideRight>
 </template>
 
 <script>
@@ -154,7 +156,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$responsiveWidth: 768px;
+$responsiveWidth: 767px;
 
 .nav-first {
   @apply h-screen;

components/translate/SlideLeft.vue

@@ -0,0 +1,25 @@
+<template>
+  <transition
+    :appear="appear"
+    name="translate-slide-left"
+    enter-active-class="transition duration-500 transform"
+    enter-class="translate-x-full"
+    enter-to-class="translate-x-0"
+    leave-active-class="transition duration-500 transform"
+    leave-class="translate-x-0"
+    leave-to-class="translate-x-full"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    appear: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

components/translate/SlideRight.vue

@@ -0,0 +1,25 @@
+<template>
+  <transition
+    :appear="appear"
+    name="translate-slide-right"
+    enter-active-class="transition duration-500 transform"
+    enter-class="-translate-x-full"
+    enter-to-class="translate-x-0"
+    leave-active-class="transition duration-500 transform"
+    leave-class="translate-x-0"
+    leave-to-class="-translate-x-full"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    appear: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

pages/graphql.vue

@@ -340,7 +340,11 @@
         </AppSection>
       </div>
 
-      <aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
+      <TranslateSlideLeft>
+        <aside
+          v-if="activeSidebar"
+          class="sticky-inner inner-right lg:max-w-md"
+        >
           <SmartTabs>
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection ref="docs" :label="$t('docs')" no-legend>
@@ -463,6 +467,7 @@
               </SmartTab> -->
           </SmartTabs>
         </aside>
+      </TranslateSlideLeft>
 
       <SmartHideMenu
         :active="activeSidebar"

pages/index.vue

@@ -615,7 +615,11 @@
         />
       </div>
 
-      <aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
+      <TranslateSlideLeft>
+        <aside
+          v-if="activeSidebar"
+          class="sticky-inner inner-right lg:max-w-md"
+        >
           <section>
             <SmartTabs>
               <SmartTab :id="'history'" :label="$t('history')" :selected="true">
@@ -640,6 +644,7 @@
             </SmartTabs>
           </section>
         </aside>
+      </TranslateSlideLeft>
 
       <SmartHideMenu
         :active="activeSidebar"