feat(gui-v2): add sidebar transition

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);
 }

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

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 />

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',
+  },
 })