Change User Profile Redirection to Dropdown Menu with Close Button (My Profile, Settings, Logout)

Currently, when the user clicks on the User Profile icon, it redirects to a new page. This behavior should be changed so that instead of redirection, a dropdown or small menu appears directly below the user profile icon. The menu should have the following options:

My Profile: When clicked, this should show the user's profile, including the profile picture and remaining 4 components which are already present.
Settings: A small dropdown for settings, since it is not very long and only has two settings.
Logout: Log the user out of the session.
The menu should also include a cross (✕) mark to allow users to close the dropdown.
The User Profile Picture should be displayed within the My Profile section.

Acceptance Criteria:

The profile icon no longer redirects to a new page.
A dropdown menu with My Profile, Settings, and Logout should appear when the profile icon is clicked.
A cross mark (✕) should be available to close the dropdown menu.
The profile picture should be visible inside the My Profile section.

Steps to Reproduce:

Go to the homepage.
Click on the User Profile icon.
See that it currently redirects to a new page (current behavior).
Change the behavior to show the dropdown menu with a close button (expected behavior).

Expected Behavior:

Clicking the User Profile icon should display a small menu with options: My Profile, Settings, and Logout, without redirecting to a new page.
The My Profile section should display the user's profile photo.
The dropdown menu should have a cross mark (✕) in the corner to close it.

Actual Behavior:

Currently, clicking the User Profile icon navigates to a new page

oss-slu / Enhancing-Bioinformatics-Research-through-LLM

Change User Profile Redirection to Dropdown Menu with Close Button (My Profile, Settings, Logout) #31