refactor: reorganize user profile display in Sidebar component, moving notification bell and user details for improved layout and accessibility
This commit is contained in:
@@ -213,15 +213,6 @@
|
||||
</div>
|
||||
<div class="ml-auto flex flex-none items-center gap-4">
|
||||
{#if currentUser.data}
|
||||
<!-- Sino de notificações no canto superior direito -->
|
||||
<div class="relative">
|
||||
<NotificationBell />
|
||||
</div>
|
||||
|
||||
<div class="mr-2 hidden flex-col items-end lg:flex">
|
||||
<span class="text-primary text-sm font-semibold">{currentUser.data.nome}</span>
|
||||
<span class="text-base-content/60 text-xs">{currentUser.data.role?.nome}</span>
|
||||
</div>
|
||||
<div class="dropdown dropdown-end">
|
||||
<!-- Botão de Perfil ULTRA MODERNO -->
|
||||
<button
|
||||
@@ -233,13 +224,7 @@
|
||||
<!-- Efeito de brilho no hover -->
|
||||
<div
|
||||
class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
></div>
|
||||
|
||||
<!-- Anel de pulso sutil -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl"
|
||||
style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
|
||||
></div>
|
||||
> </div>
|
||||
|
||||
<!-- Avatar/Foto do usuário ou ícone padrão -->
|
||||
{#if avatarUrlDoUsuario()}
|
||||
@@ -256,6 +241,12 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Anel de pulso sutil -->
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl"
|
||||
style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
|
||||
></div>
|
||||
|
||||
<!-- Badge de status online -->
|
||||
<div
|
||||
class="bg-success absolute top-1 right-1 z-20 h-3 w-3 rounded-full border-2 border-white shadow-lg"
|
||||
@@ -278,6 +269,16 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mr-2 hidden flex-col items-end lg:flex">
|
||||
<span class="text-primary text-sm font-semibold">{currentUser.data.nome}</span>
|
||||
<span class="text-base-content/60 text-xs">{currentUser.data.role?.nome}</span>
|
||||
</div>
|
||||
|
||||
<!-- Sino de notificações no canto superior direito -->
|
||||
<div class="relative">
|
||||
<NotificationBell />
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user