SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: reorganize user profile display in Sidebar component, moving notification bell and user details for improved layout and accessibility

Browse Source
This commit is contained in:
deyvisonwanderley
2025-11-30 00:35:20 -03:00
parent b85021d924
commit 39c948aa6b
1 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
apps/web/src/lib/components/Sidebar.svelte
View File

@@ -213,15 +213,6 @@
</div> </div>
<div class="ml-auto flex flex-none items-center gap-4"> <div class="ml-auto flex flex-none items-center gap-4">
{#if currentUser.data} {#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"> <div class="dropdown dropdown-end">
<!-- Botão de Perfil ULTRA MODERNO --> <!-- Botão de Perfil ULTRA MODERNO -->
<button <button
@@ -233,30 +224,30 @@
<!-- Efeito de brilho no hover --> <!-- Efeito de brilho no hover -->
<div <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" 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> > </div>
<!-- Anel de pulso sutil --> <!-- Avatar/Foto do usuário ou ícone padrão -->
<div {#if avatarUrlDoUsuario()}
class="absolute inset-0 rounded-2xl" <img
style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;" src={avatarUrlDoUsuario()}
></div> alt={currentUser.data?.nome || 'Usuário'}
class="relative z-10 h-full w-full object-cover"
/>
{:else}
<!-- Ícone de usuário moderno (fallback) -->
<User
class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
/>
{/if}
<!-- Avatar/Foto do usuário ou ícone padrão --> <!-- Anel de pulso sutil -->
{#if avatarUrlDoUsuario()} <div
<img class="absolute inset-0 rounded-2xl"
src={avatarUrlDoUsuario()} style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
alt={currentUser.data?.nome || 'Usuário'} ></div>
class="relative z-10 h-full w-full object-cover"
/>
{:else}
<!-- Ícone de usuário moderno (fallback) -->
<User
class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
/>
{/if}
<!-- Badge de status online --> <!-- Badge de status online -->
<div <div
class="bg-success absolute top-1 right-1 z-20 h-3 w-3 rounded-full border-2 border-white shadow-lg" class="bg-success absolute top-1 right-1 z-20 h-3 w-3 rounded-full border-2 border-white shadow-lg"
style="animation: pulse-dot 2s ease-in-out infinite;" style="animation: pulse-dot 2s ease-in-out infinite;"
@@ -278,6 +269,16 @@
</li> </li>
</ul> </ul>
</div> </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} {:else}
<button <button
type="button" type="button"