feat: introduce animations
This commit is contained in:
liyasthomas
@@ -300,8 +300,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$responsiveWidth: 768px;
|
||||
|
||||
.logo {
|
||||
@apply text-xl;
|
||||
@apply transition-colors;
|
||||
|
||||
@@ -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;
|
||||
|
||||
25
components/translate/SlideLeft.vue
Normal file
25
components/translate/SlideLeft.vue
Normal file
@@ -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>
|
||||
25
components/translate/SlideRight.vue
Normal file
25
components/translate/SlideRight.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user