From 980ba92b072b54da1b752d9853f87d8538a5ca70 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 22:14:18 +0000
Subject: [PATCH] Organize logout button within user profile dropdown menu

Refactors the Home page UI to integrate the logout button into a user profile dropdown menu, improving navigation and user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/9tQ591o
---
 client/src/pages/Home.tsx | 37 ++++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 4a2655e..8cb7a7e 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -144,21 +144,28 @@ export default function Home() {
                     Admin Dashboard
                   </Button>
                   
-                  <div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md">
-                    <User className="h-4 w-4 text-gray-600" />
-                    <span className="text-sm font-medium text-gray-700" data-testid="user-name">
-                      {user.firstName} {user.lastName}
-                    </span>
-                  </div>
-                  
-                  <Button 
-                    variant="ghost" 
-                    size="sm"
-                    onClick={handleLogout}
-                    data-testid="button-logout"
-                  >
-                    <LogOut className="h-4 w-4" />
-                  </Button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md cursor-pointer hover:bg-gray-200 transition-colors" data-testid="user-profile-chip">
+                        <User className="h-4 w-4 text-gray-600" />
+                        <span className="text-sm font-medium text-gray-700" data-testid="user-name">
+                          {user.firstName} {user.lastName}
+                        </span>
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-48">
+                      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem 
+                        onClick={handleLogout}
+                        className="cursor-pointer text-red-600"
+                        data-testid="button-logout"
+                      >
+                        <LogOut className="h-4 w-4 mr-2" />
+                        Logout
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </>
               ) : (
                 <Button