fix: allow profile menu to close on icon click

[singhrishiranjan]

This PR fixes a bug in the ProfileMenu component where the dropdown menu would not close if the user clicked the profile icon while the menu was already open.

Motivation and Context
Previously, users expecting to toggle the menu off by clicking the user icon were unable to do so. Because the menu would rapidly close and reopen in the background, it appeared "stuck" in the open position. This update restores expected, standard toggle behavior and improves the overall user experience.

Technical Explanation
The bug was caused by a timing conflict between the document's mousedown event listener (used for detecting outside clicks) and the button's React onClick event.

What was happening:

• When the user clicked the icon, the document's mousedown event fired first.
• Because the button was not inside the .profile-menu-container class, the listener treated it as an "outside click" and updated the state to open = false.
• A millisecond later, the button's onClick event fired, which toggled the state from false back to true.

The Solution:

• Replaced the CSS class-based target matching with a useRef hook attached to the outermost wrapper div of the component.
• Updated the handleClickOutside logic to check !menuRef.current.contains(event.target).
• Now, the document listener recognizes the button as part of the component and ignores the click, allowing the button's onClick handler to smoothly toggle the state.

How to Test

1. Click the profile icon to open the menu.
2. Click anywhere outside the menu to ensure it still closes properly.
3. Click the profile icon to open the menu again.
4. Click the profile icon a second time to verify the menu now closes successfully.