From 0e7b60235aaa9514d8d0d9d4abe776c8eccfe610 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Tue, 29 Jul 2025 22:30:14 +0200
Subject: [PATCH] Fixed log in animation

---
 app/assets/main.css                | 18 +++++++++++++++---
 app/components/global/user/CTA.vue | 28 +++++++++++++++-------------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 97c64d7..0d4eb4c 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -33,18 +33,30 @@ body {
 }
 
 .fade-enter-active,
-.fade-leave-active {
+.fade-leave-active,
+.fade-group-enter-active,
+.fade-group-leave-active {
   transition: all .5s ease;
 }
 .fade-delay-enter-active,
-.fade-delay-leave-active {
+.fade-delay-leave-active,
+.fade-group-delay-enter-active,
+.fade-group-delay-leave-active {
   transition: all .5s ease 1s;
 }
 
 .fade-enter-from,
 .fade-leave-to,
 .fade-delay-enter-from,
-.fade-delay-leave-to {
+.fade-delay-leave-to,
+.fade-group-enter-from,
+.fade-group-leave-to,
+.fade-group-delay-enter-from,
+.fade-group-delay-leave-to {
   opacity: 0;
   visibility: hidden;
 }
+
+.fade-group-leave-active {
+  position: absolute;
+}
diff --git a/app/components/global/user/CTA.vue b/app/components/global/user/CTA.vue
index e68b873..45138d2 100644
--- a/app/components/global/user/CTA.vue
+++ b/app/components/global/user/CTA.vue
@@ -58,19 +58,21 @@ function pushRoute(to: AvailableRoutes) {
   <ClientOnly>
     <UiDropdownMenu v-model:open="menuOpened">
       <UiDropdownMenuTrigger>
-        <UiAvatar v-if="user" id="user-avatar" class="ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 cursor-pointer">
-          <UiAvatarImage
-            :src="userMeta?.avatar_url"
-            :alt="userMeta?.full_name"
-            referrerpolicy="no-referrer"
-          />
-          <UiAvatarFallback>
-            {{ $t('ui.sidebarMenu.avatarFallback') }}
-          </UiAvatarFallback>
-        </UiAvatar>
-        <UiButton v-else variant="outline" size="icon" class="rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-950 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
-          <PhUserCircle size="24" />
-        </UiButton>
+        <TransitionGroup name="fade-group" class="transition-group" appear>
+          <UiAvatar v-if="user" id="user-avatar" class="aspect-square ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 cursor-pointer">
+            <UiAvatarImage
+              :src="userMeta?.avatar_url"
+              :alt="userMeta?.full_name"
+              referrerpolicy="no-referrer"
+            />
+            <UiAvatarFallback>
+              {{ $t('ui.sidebarMenu.avatarFallback') }}
+            </UiAvatarFallback>
+          </UiAvatar>
+          <UiButton v-else variant="outline" size="icon" class="aspect-square ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-950 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
+            <PhUserCircle size="24" />
+          </UiButton>
+        </TransitionGroup>
       </UiDropdownMenuTrigger>
 
       <UiDropdownMenuContent class="w-72 p-0 pb-1" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">