fix: close theme dropdown when clicking outside the menu

[toufiq00007]

Description

This PR fixes an issue where the Theme selection dropdown menu would remain open even after a user clicked outside of its container.

I implemented a React custom outside-click handler using useRef and a global event listener inside a useEffect hook. Now, clicking anywhere outside the theme menu seamlessly closes it, improving the overall user experience and interface navigation.

Changes Made

• Added a themesRef using React's useRef hook onto the outer container wrapper of the Theme section in TopnavDashboard.jsx.
• Implemented a handleClickOutside listener within a useEffect hook to detect clicks outside the wrapper.
• Correctly toggles the showThemes state back to false when an external click is detected.
• Cleaned up the event listener on component unmount to prevent potential memory leaks.

How to Test

1. Spin up both the frontend and server locally.
2. Click the Theme button on the top navigation bar dashboard to open the theme selection dropdown.
3. Click anywhere completely outside the dropdown container (e.g., main workspace area or sidebar).
4. Expected Result: The theme dropdown menu should immediately close.

Checklists

• My code follows the code style of this project.
• My changes generate no new warnings or errors.
• I have verified the structural implementation of the React hooks.

closes #239

[vercel]

@toufiq00007 is attempting to deploy a commit to the Sunil Kumar's projects Team on Vercel.

A member of the Team first needs to authorize it.