Domain:
Frontend / UI / UX

Difficulty:
Intermediate

Problem / steps to reproduce (for bugs)

• On the top-right corner of the page, when a user is logged in, the UI currently shows:
  • A user icon
  • The username
• However, clicking this area does nothing.
• There is currently no dropdown menu for accessing account-related actions.
• Users cannot easily navigate to My Contributions or perform Logout actions from the header.

Expected outcome / task:

• Convert the user icon + username into a dropdown trigger.
• When clicked, open a dropdown menu with two items:
  1. My Contributions
     • Navigates to the new Contributions page.
  2. Logout
     • Calls the logout handler and redirects the user appropriately.
• Use a UI component library already in the stack such as Radix UI Dropdown Menu.
• Styling should follow Tailwind standards (padding, hover states, alignment, shadow, rounded corners).
• Dropdown must only appear when the user is logged in.

Any links or references:

Setup Steps (short):

1. Ensure project runs (yarn install && yarn dev).
2. Locate the header/top-right profile component.
3. Wrap the user icon + username in a Radix DropdownMenu.Trigger.
4. Create a DropdownMenu.Content with:
   • “My Contributions” → navigate to /contributions.
   • “Logout” → call logout API / clear auth + redirect to homepage.
5. Add Tailwind styling for spacing, hover & active states, and smooth transitions.
6. Test both logged-in and logged-out states to ensure dropdown only appears when appropriate.