From cabb3e9d06a4de81573e4277d2317d5907a4140a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 19 Aug 2022 20:14:38 +0200
Subject: [PATCH] chore(gui-v2): remove transition from header

---
 packages/nc-gui-v2/layouts/base.vue    | 114 ++++++++++++-------------
 packages/nc-gui-v2/layouts/default.vue |  10 ++-
 2 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 8dfc346000..6e15e0df6b 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -21,74 +21,70 @@ const logout = () => {
     <div id="nc-sidebar-left" />
 
     <a-layout class="!flex-col">
-      <Transition name="layout">
-        <a-layout-header
-          v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
-          class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
+      <a-layout-header
+        v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
+        class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
+      >
+        <div
+          v-if="route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'"
+          class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
+          @click="navigateTo('/')"
         >
-          <div
-            v-if="
-              route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
-            "
-            class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
-            @click="navigateTo('/')"
-          >
-            <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-          </div>
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
 
-          <div class="!text-white flex justify-center">
-            <div v-show="isLoading" class="flex items-center gap-2 ml-3">
-              {{ $t('general.loading') }}
+        <div class="!text-white flex justify-center">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3">
+            {{ $t('general.loading') }}
 
-              <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
-            </div>
+            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
           </div>
+        </div>
 
-          <div class="flex-1" />
-
-          <GeneralReleaseInfo />
-
-          <GeneralShareBaseButton v-if="!isSharedBase" />
-
-          <a-tooltip placement="bottom" :mouse-enter-delay="1">
-            <template #title> Switch language</template>
+        <div class="flex-1" />
 
-            <div class="flex pr-4 items-center text-white">
-              <GeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
-            </div>
-          </a-tooltip>
+        <GeneralReleaseInfo />
 
-          <template v-if="signedIn && !isSharedBase">
-            <a-dropdown :trigger="['click']">
-              <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white" @click.prevent />
+        <GeneralShareBaseButton v-if="!isSharedBase" />
 
-              <template #overlay>
-                <a-menu class="!py-0 leading-8 !rounded">
-                  <a-menu-item key="0" class="!rounded-t">
-                    <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
-                      <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
+        <a-tooltip placement="bottom" :mouse-enter-delay="1">
+          <template #title> Switch language</template>
 
-                      <span class="prose group-hover:text-primary"> {{ email }}</span>
-                    </nuxt-link>
-                  </a-menu-item>
-
-                  <a-menu-divider class="!m-0" />
-
-                  <a-menu-item key="1" class="!rounded-b group">
-                    <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                      <MdiLogout class="group-hover:text-accent" />&nbsp;
-
-                      <span class="prose group-hover:text-primary">
-                        {{ $t('general.signOut') }}
-                      </span>
-                    </div>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </template>
-        </a-layout-header>
-      </Transition>
+          <div class="flex pr-4 items-center text-white">
+            <GeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
+          </div>
+        </a-tooltip>
+
+        <template v-if="signedIn && !isSharedBase">
+          <a-dropdown :trigger="['click']">
+            <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white" @click.prevent />
+
+            <template #overlay>
+              <a-menu class="!py-0 leading-8 !rounded">
+                <a-menu-item key="0" class="!rounded-t">
+                  <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
+                    <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
+
+                    <span class="prose group-hover:text-primary"> {{ email }}</span>
+                  </nuxt-link>
+                </a-menu-item>
+
+                <a-menu-divider class="!m-0" />
+
+                <a-menu-item key="1" class="!rounded-b group">
+                  <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                    <MdiLogout class="group-hover:text-accent" />&nbsp;
+
+                    <span class="prose group-hover:text-primary">
+                      {{ $t('general.signOut') }}
+                    </span>
+                  </div>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </template>
+      </a-layout-header>
 
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue
index dce2aae15c..252e820c59 100644
--- a/packages/nc-gui-v2/layouts/default.vue
+++ b/packages/nc-gui-v2/layouts/default.vue
@@ -13,15 +13,17 @@ useHead({
 
 <script lang="ts">
 export default {
-  name: 'Default',
+  name: 'DefaultLayout',
 }
 </script>
 
 <template>
   <div class="w-full h-full">
-    <teleport v-if="$slots.sidebar" to="#nc-sidebar-left">
-      <slot name="sidebar" />
-    </teleport>
+    <Transition duration="5000" name="page">
+      <Teleport to="#nc-sidebar-left">
+        <slot name="sidebar" />
+      </Teleport>
+    </Transition>
 
     <a-layout-content>
       <slot />