From ced2f1b91187a63fd5d320cc879c01db2b160ca0 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 13 Jun 2021 20:31:42 +0530
Subject: [PATCH] feat: introduce animations

---
 assets/scss/styles.scss             |   3 +-
 components/app/Header.vue           |   2 -
 components/app/Sidenav.vue          | 238 ++++++++++++++--------------
 components/translate/SlideLeft.vue  |  25 +++
 components/translate/SlideRight.vue |  25 +++
 pages/graphql.vue                   | 219 ++++++++++++-------------
 pages/index.vue                     |  49 +++---
 7 files changed, 311 insertions(+), 250 deletions(-)
 create mode 100644 components/translate/SlideLeft.vue
 create mode 100644 components/translate/SlideRight.vue

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 18b9150c9..9a5ae70fe 100644
--- a/assets/scss/styles.scss
+++ b/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;
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 275d84a4f..c75b73820 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -300,8 +300,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$responsiveWidth: 768px;
-
 .logo {
   @apply text-xl;
   @apply transition-colors;
diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
index f10f41010..3948eece4 100644
--- a/components/app/Sidenav.vue
+++ b/components/app/Sidenav.vue
@@ -1,125 +1,127 @@
 <template>
-  <aside class="nav-first">
-    <nav class="primary-nav">
-      <!--
+  <TranslateSlideRight appear>
+    <aside class="nav-first">
+      <nav class="primary-nav">
+        <!--
         We're using manual checks for linkActive because the query string
         seems to mess up the nuxt-link active class.
       -->
-      <nuxt-link
-        v-tooltip.right="$t('home')"
-        :to="localePath('index')"
-        :class="linkActive('/')"
-        :aria-label="$t('home')"
-      >
-        <AppLogo alt class="material-icons" style="height: 24px" />
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('realtime')"
-        :to="localePath('realtime')"
-        :class="linkActive('/realtime')"
-      >
-        <i class="material-icons">language</i>
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('graphql')"
-        :to="localePath('graphql')"
-        :class="linkActive('/graphql')"
-        :aria-label="$t('graphql')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          width="24"
-          viewBox="0 0 29.999 30"
+        <nuxt-link
+          v-tooltip.right="$t('home')"
+          :to="localePath('index')"
+          :class="linkActive('/')"
+          :aria-label="$t('home')"
         >
-          <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
-          <path d="M2.727 20.53h24.538v1.272H2.727z" />
-          <path
-            d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
-          />
-          <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
-          <path
-            d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
-          />
-          <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
-          <path
-            d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"
-          />
-        </svg>
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('documentation')"
-        :to="localePath('doc')"
-        :class="linkActive('/doc')"
-        :aria-label="$t('documentation')"
-      >
-        <i class="material-icons">topic</i>
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('settings')"
-        :to="localePath('settings')"
-        :class="linkActive('/settings')"
-        :aria-label="$t('settings')"
-      >
-        <i class="material-icons">settings</i>
-      </nuxt-link>
-    </nav>
-    <nav v-if="$route.path == '/'" class="secondary-nav">
-      <a v-tooltip.right="$t('request')" href="#request">
-        <i class="material-icons">cloud_upload</i>
-      </a>
-      <a v-tooltip.right="$t('options')" href="#options">
-        <i class="material-icons">toc</i>
-      </a>
-      <a v-tooltip.right="$t('response')" href="#response">
-        <i class="material-icons">cloud_download</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
-      <a v-tooltip.right="$t('request')" href="#request">
-        <i class="material-icons">cloud_upload</i>
-      </a>
-      <a v-tooltip.right="$t('communication')" href="#response">
-        <i class="material-icons">cloud_download</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
-      <a v-tooltip.right="$t('endpoint')" href="#endpoint">
-        <i class="material-icons">cloud</i>
-      </a>
-      <a v-tooltip.right="$t('schema')" href="#schema">
-        <i class="material-icons">assignment_returned</i>
-      </a>
-      <a v-tooltip.right="$t('query')" href="#query">
-        <i class="material-icons">cloud_upload</i>
-      </a>
-      <a v-tooltip.right="$t('response')" href="#response">
-        <i class="material-icons">cloud_download</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
-      <a v-tooltip.right="$t('import')" href="#import">
-        <i class="material-icons">folder</i>
-      </a>
-      <a v-tooltip.right="$t('documentation')" href="#documentation">
-        <i class="material-icons">insert_drive_file</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
-      <a v-tooltip.right="$t('account')" href="#account">
-        <i class="material-icons">person</i>
-      </a>
-      <a v-tooltip.right="$t('theme')" href="#theme">
-        <i class="material-icons">brush</i>
-      </a>
-      <a v-tooltip.right="$t('extensions')" href="#extensions">
-        <i class="material-icons">extension</i>
-      </a>
-      <a v-tooltip.right="$t('proxy')" href="#proxy">
-        <i class="material-icons">public</i>
-      </a>
-    </nav>
-  </aside>
+          <AppLogo alt class="material-icons" style="height: 24px" />
+        </nuxt-link>
+        <nuxt-link
+          v-tooltip.right="$t('realtime')"
+          :to="localePath('realtime')"
+          :class="linkActive('/realtime')"
+        >
+          <i class="material-icons">language</i>
+        </nuxt-link>
+        <nuxt-link
+          v-tooltip.right="$t('graphql')"
+          :to="localePath('graphql')"
+          :class="linkActive('/graphql')"
+          :aria-label="$t('graphql')"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            width="24"
+            viewBox="0 0 29.999 30"
+          >
+            <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
+            <path d="M2.727 20.53h24.538v1.272H2.727z" />
+            <path
+              d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
+            />
+            <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
+            <path
+              d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
+            />
+            <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
+            <path
+              d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"
+            />
+          </svg>
+        </nuxt-link>
+        <nuxt-link
+          v-tooltip.right="$t('documentation')"
+          :to="localePath('doc')"
+          :class="linkActive('/doc')"
+          :aria-label="$t('documentation')"
+        >
+          <i class="material-icons">topic</i>
+        </nuxt-link>
+        <nuxt-link
+          v-tooltip.right="$t('settings')"
+          :to="localePath('settings')"
+          :class="linkActive('/settings')"
+          :aria-label="$t('settings')"
+        >
+          <i class="material-icons">settings</i>
+        </nuxt-link>
+      </nav>
+      <nav v-if="$route.path == '/'" class="secondary-nav">
+        <a v-tooltip.right="$t('request')" href="#request">
+          <i class="material-icons">cloud_upload</i>
+        </a>
+        <a v-tooltip.right="$t('options')" href="#options">
+          <i class="material-icons">toc</i>
+        </a>
+        <a v-tooltip.right="$t('response')" href="#response">
+          <i class="material-icons">cloud_download</i>
+        </a>
+      </nav>
+      <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
+        <a v-tooltip.right="$t('request')" href="#request">
+          <i class="material-icons">cloud_upload</i>
+        </a>
+        <a v-tooltip.right="$t('communication')" href="#response">
+          <i class="material-icons">cloud_download</i>
+        </a>
+      </nav>
+      <nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
+        <a v-tooltip.right="$t('endpoint')" href="#endpoint">
+          <i class="material-icons">cloud</i>
+        </a>
+        <a v-tooltip.right="$t('schema')" href="#schema">
+          <i class="material-icons">assignment_returned</i>
+        </a>
+        <a v-tooltip.right="$t('query')" href="#query">
+          <i class="material-icons">cloud_upload</i>
+        </a>
+        <a v-tooltip.right="$t('response')" href="#response">
+          <i class="material-icons">cloud_download</i>
+        </a>
+      </nav>
+      <nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
+        <a v-tooltip.right="$t('import')" href="#import">
+          <i class="material-icons">folder</i>
+        </a>
+        <a v-tooltip.right="$t('documentation')" href="#documentation">
+          <i class="material-icons">insert_drive_file</i>
+        </a>
+      </nav>
+      <nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
+        <a v-tooltip.right="$t('account')" href="#account">
+          <i class="material-icons">person</i>
+        </a>
+        <a v-tooltip.right="$t('theme')" href="#theme">
+          <i class="material-icons">brush</i>
+        </a>
+        <a v-tooltip.right="$t('extensions')" href="#extensions">
+          <i class="material-icons">extension</i>
+        </a>
+        <a v-tooltip.right="$t('proxy')" href="#proxy">
+          <i class="material-icons">public</i>
+        </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;
diff --git a/components/translate/SlideLeft.vue b/components/translate/SlideLeft.vue
new file mode 100644
index 000000000..e44a369c9
--- /dev/null
+++ b/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>
diff --git a/components/translate/SlideRight.vue b/components/translate/SlideRight.vue
new file mode 100644
index 000000000..adb821991
--- /dev/null
+++ b/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>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 1e05e7e77..bda374e92 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -340,129 +340,134 @@
         </AppSection>
       </div>
 
-      <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>
-              <section class="flex-col">
-                <input
-                  v-model="graphqlFieldsFilterText"
-                  type="text"
-                  :placeholder="$t('search')"
-                  class="rounded-t-lg"
-                />
-                <SmartTabs ref="gqlTabs" styles="m-4">
-                  <div class="gqlTabs">
-                    <SmartTab
-                      v-if="queryFields.length > 0"
-                      :id="'queries'"
-                      :label="$t('queries')"
-                      :selected="true"
-                    >
-                      <div
-                        v-for="field in filteredQueryFields"
-                        :key="field.name"
+      <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>
+                <section class="flex-col">
+                  <input
+                    v-model="graphqlFieldsFilterText"
+                    type="text"
+                    :placeholder="$t('search')"
+                    class="rounded-t-lg"
+                  />
+                  <SmartTabs ref="gqlTabs" styles="m-4">
+                    <div class="gqlTabs">
+                      <SmartTab
+                        v-if="queryFields.length > 0"
+                        :id="'queries'"
+                        :label="$t('queries')"
+                        :selected="true"
                       >
-                        <GraphqlField
-                          :gql-field="field"
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
+                        <div
+                          v-for="field in filteredQueryFields"
+                          :key="field.name"
+                        >
+                          <GraphqlField
+                            :gql-field="field"
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
 
-                    <SmartTab
-                      v-if="mutationFields.length > 0"
-                      :id="'mutations'"
-                      :label="$t('mutations')"
-                    >
-                      <div
-                        v-for="field in filteredMutationFields"
-                        :key="field.name"
+                      <SmartTab
+                        v-if="mutationFields.length > 0"
+                        :id="'mutations'"
+                        :label="$t('mutations')"
                       >
-                        <GraphqlField
-                          :gql-field="field"
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
+                        <div
+                          v-for="field in filteredMutationFields"
+                          :key="field.name"
+                        >
+                          <GraphqlField
+                            :gql-field="field"
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
 
-                    <SmartTab
-                      v-if="subscriptionFields.length > 0"
-                      :id="'subscriptions'"
-                      :label="$t('subscriptions')"
-                    >
-                      <div
-                        v-for="field in filteredSubscriptionFields"
-                        :key="field.name"
+                      <SmartTab
+                        v-if="subscriptionFields.length > 0"
+                        :id="'subscriptions'"
+                        :label="$t('subscriptions')"
                       >
-                        <GraphqlField
-                          :gql-field="field"
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
+                        <div
+                          v-for="field in filteredSubscriptionFields"
+                          :key="field.name"
+                        >
+                          <GraphqlField
+                            :gql-field="field"
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
 
-                    <SmartTab
-                      v-if="graphqlTypes.length > 0"
-                      :id="'types'"
-                      ref="typesTab"
-                      :label="$t('types')"
-                    >
-                      <div
-                        v-for="type in filteredGraphqlTypes"
-                        :key="type.name"
+                      <SmartTab
+                        v-if="graphqlTypes.length > 0"
+                        :id="'types'"
+                        ref="typesTab"
+                        :label="$t('types')"
                       >
-                        <GraphqlType
-                          :gql-type="type"
-                          :gql-types="graphqlTypes"
-                          :is-highlighted="
-                            isGqlTypeHighlighted({ gqlType: type })
-                          "
-                          :highlighted-fields="
-                            getGqlTypeHighlightedFields({ gqlType: type })
-                          "
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
-                  </div>
-                </SmartTabs>
-              </section>
-              <p
-                v-if="
-                  queryFields.length === 0 &&
-                  mutationFields.length === 0 &&
-                  subscriptionFields.length === 0 &&
-                  graphqlTypes.length === 0
-                "
-                class="info"
-              >
-                {{ $t("send_request_first") }}
-              </p>
-            </AppSection>
-          </SmartTab>
+                        <div
+                          v-for="type in filteredGraphqlTypes"
+                          :key="type.name"
+                        >
+                          <GraphqlType
+                            :gql-type="type"
+                            :gql-types="graphqlTypes"
+                            :is-highlighted="
+                              isGqlTypeHighlighted({ gqlType: type })
+                            "
+                            :highlighted-fields="
+                              getGqlTypeHighlightedFields({ gqlType: type })
+                            "
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
+                    </div>
+                  </SmartTabs>
+                </section>
+                <p
+                  v-if="
+                    queryFields.length === 0 &&
+                    mutationFields.length === 0 &&
+                    subscriptionFields.length === 0 &&
+                    graphqlTypes.length === 0
+                  "
+                  class="info"
+                >
+                  {{ $t("send_request_first") }}
+                </p>
+              </AppSection>
+            </SmartTab>
 
-          <SmartTab :id="'history'" :label="$t('history')">
-            <History
-              ref="graphqlHistoryComponent"
-              :page="'graphql'"
-              @useHistory="handleUseHistory"
-            />
-          </SmartTab>
+            <SmartTab :id="'history'" :label="$t('history')">
+              <History
+                ref="graphqlHistoryComponent"
+                :page="'graphql'"
+                @useHistory="handleUseHistory"
+              />
+            </SmartTab>
 
-          <SmartTab :id="'collections'" :label="$t('collections')">
-            <CollectionsGraphql />
-          </SmartTab>
+            <SmartTab :id="'collections'" :label="$t('collections')">
+              <CollectionsGraphql />
+            </SmartTab>
 
-          <!-- <SmartTab :id="'env'" :label="$t('environments')">
+            <!-- <SmartTab :id="'env'" :label="$t('environments')">
                 <Environments @use-environment="useSelectedEnvironment($event)" />
               </SmartTab>
 
               <SmartTab :id="'notes'" :label="$t('notes')">
                 <HttpNotes />
               </SmartTab> -->
-        </SmartTabs>
-      </aside>
+          </SmartTabs>
+        </aside>
+      </TranslateSlideLeft>
 
       <SmartHideMenu
         :active="activeSidebar"
diff --git a/pages/index.vue b/pages/index.vue
index 9d4aca933..4b5fdc448 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -615,31 +615,36 @@
         />
       </div>
 
-      <aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
-        <section>
-          <SmartTabs>
-            <SmartTab :id="'history'" :label="$t('history')" :selected="true">
-              <History
-                :page="'rest'"
-                @useHistory="handleUseHistory"
-                ref="historyComponent"
-              />
-            </SmartTab>
+      <TranslateSlideLeft>
+        <aside
+          v-if="activeSidebar"
+          class="sticky-inner inner-right lg:max-w-md"
+        >
+          <section>
+            <SmartTabs>
+              <SmartTab :id="'history'" :label="$t('history')" :selected="true">
+                <History
+                  :page="'rest'"
+                  @useHistory="handleUseHistory"
+                  ref="historyComponent"
+                />
+              </SmartTab>
 
-            <SmartTab :id="'collections'" :label="$t('collections')">
-              <Collections />
-            </SmartTab>
+              <SmartTab :id="'collections'" :label="$t('collections')">
+                <Collections />
+              </SmartTab>
 
-            <SmartTab :id="'env'" :label="$t('environments')">
-              <Environments />
-            </SmartTab>
+              <SmartTab :id="'env'" :label="$t('environments')">
+                <Environments />
+              </SmartTab>
 
-            <SmartTab :id="'notes'" :label="$t('notes')">
-              <HttpNotes />
-            </SmartTab>
-          </SmartTabs>
-        </section>
-      </aside>
+              <SmartTab :id="'notes'" :label="$t('notes')">
+                <HttpNotes />
+              </SmartTab>
+            </SmartTabs>
+          </section>
+        </aside>
+      </TranslateSlideLeft>
 
       <SmartHideMenu
         :active="activeSidebar"