Browse Source

feat(gui-v2): add sidebar transition

pull/3252/head
braks 2 years ago
parent
commit
5420822d99
  1. 3
      packages/nc-gui-v2/assets/style.scss
  2. 20
      packages/nc-gui-v2/layouts/base.vue
  3. 8
      packages/nc-gui-v2/layouts/default.vue
  4. 9
      packages/nc-gui-v2/nuxt.config.ts

3
packages/nc-gui-v2/assets/style.scss

@ -146,7 +146,7 @@ a {
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
@apply transition-opacity duration-400 ease-in-out;
@apply transition-all duration-200 ease;
}
.page-enter-from,
@ -162,7 +162,6 @@ a {
}
.slide-enter-from,
.slide-leave-to {
transform: translate(-100%, 0);
}

20
packages/nc-gui-v2/layouts/base.vue

@ -1,6 +1,5 @@
<script lang="ts" setup>
import { navigateTo } from '#app'
import { computed, useGlobal, useRoute } from '#imports'
import { computed, navigateTo, ref, useGlobal, useNuxtApp, useProject, useRoute } from '#imports'
const { signOut, signedIn, isLoading, user } = useGlobal()
@ -10,15 +9,30 @@ const route = useRoute()
const email = computed(() => user.value?.email ?? '---')
const hasSider = ref(false)
const sidebar = ref<HTMLDivElement>()
const logout = () => {
signOut()
navigateTo('/signin')
}
const { hooks } = useNuxtApp()
/** when page suspensions have finished, check if a sidebar element was teleported into the layout */
hooks.hook('page:finish', () => {
if (sidebar.value) {
hasSider.value = sidebar.value?.children.length > 0
}
})
</script>
<template>
<a-layout id="nc-app" has-sider>
<div id="nc-sidebar-left" />
<Transition name="slide">
<div v-show="hasSider" id="nc-sidebar-left" ref="sidebar" />
</Transition>
<a-layout class="!flex-col">
<a-layout-header

8
packages/nc-gui-v2/layouts/default.vue

@ -19,11 +19,9 @@ export default {
<template>
<div class="w-full h-full">
<Transition duration="5000" name="page">
<Teleport to="#nc-sidebar-left">
<slot name="sidebar" />
</Teleport>
</Transition>
<Teleport to="#nc-sidebar-left">
<slot name="sidebar" />
</Teleport>
<a-layout-content>
<slot />

9
packages/nc-gui-v2/nuxt.config.ts

@ -98,4 +98,13 @@ export default defineNuxtConfig({
dirs: ['./context', './utils', './lib'],
imports: [{ name: 'useI18n', from: 'vue-i18n' }],
},
pageTransition: {
name: 'page',
mode: 'out-in',
},
layoutTransition: {
name: 'layout',
mode: 'out-in',
},
})

Loading…
Cancel
Save