From 39c948aa6b181d7359f53c0cb68f0345c6279e25 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 30 Nov 2025 00:35:20 -0300
Subject: [PATCH] refactor: reorganize user profile display in Sidebar
 component, moving notification bell and user details for improved layout and
 accessibility

---
 apps/web/src/lib/components/Sidebar.svelte | 61 +++++++++++-----------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 22a158e..c381611 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -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,30 +224,30 @@
 					<!-- 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>
+					>				</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>
+				<!-- Avatar/Foto do usuário ou ícone padrão -->
+				{#if avatarUrlDoUsuario()}
+					<img
+						src={avatarUrlDoUsuario()}
+						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 -->
-					{#if avatarUrlDoUsuario()}
-						<img
-							src={avatarUrlDoUsuario()}
-							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}
+				<!-- 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 -->
+				<!-- 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"
 						style="animation: pulse-dot 2s ease-in-out infinite;"
@@ -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"