Fixed log in animation

This commit is contained in:
Alexis
2025-07-29 22:30:14 +02:00
parent 300507bbed
commit 0e7b60235a
2 changed files with 30 additions and 16 deletions

View File

@@ -33,18 +33,30 @@ body {
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active,
.fade-group-enter-active,
.fade-group-leave-active {
transition: all .5s ease; transition: all .5s ease;
} }
.fade-delay-enter-active, .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; transition: all .5s ease 1s;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to, .fade-leave-to,
.fade-delay-enter-from, .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; opacity: 0;
visibility: hidden; visibility: hidden;
} }
.fade-group-leave-active {
position: absolute;
}

View File

@@ -58,19 +58,21 @@ function pushRoute(to: AvailableRoutes) {
<ClientOnly> <ClientOnly>
<UiDropdownMenu v-model:open="menuOpened"> <UiDropdownMenu v-model:open="menuOpened">
<UiDropdownMenuTrigger> <UiDropdownMenuTrigger>
<UiAvatar v-if="user" id="user-avatar" class="ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 cursor-pointer"> <TransitionGroup name="fade-group" class="transition-group" appear>
<UiAvatarImage <UiAvatar v-if="user" id="user-avatar" class="aspect-square ring-[.2rem] ring-indigo-700 dark:ring-neutral-900 cursor-pointer">
:src="userMeta?.avatar_url" <UiAvatarImage
:alt="userMeta?.full_name" :src="userMeta?.avatar_url"
referrerpolicy="no-referrer" :alt="userMeta?.full_name"
/> referrerpolicy="no-referrer"
<UiAvatarFallback> />
{{ $t('ui.sidebarMenu.avatarFallback') }} <UiAvatarFallback>
</UiAvatarFallback> {{ $t('ui.sidebarMenu.avatarFallback') }}
</UiAvatar> </UiAvatarFallback>
<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"> </UiAvatar>
<PhUserCircle size="24" /> <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">
</UiButton> <PhUserCircle size="24" />
</UiButton>
</TransitionGroup>
</UiDropdownMenuTrigger> </UiDropdownMenuTrigger>
<UiDropdownMenuContent class="w-72 p-0 pb-1" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40"> <UiDropdownMenuContent class="w-72 p-0 pb-1" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">