Description
When clicking the profile icon in the header, the dropdown menu (Login/Profile/Logout) opens correctly.
However, it has two problems:
The dropdown does not close automatically when navigating to another page (e.g., clicking Login or Profile).
The dropdown closes instantly without a smooth transition, making the UX feel abrupt.
Expected Behavior
The dropdown should:
Close automatically when navigating to Login/Profile/Logout.
Close with a smooth fade/slide transition for better UX.
Where is the issue?
select Frontend or backend
Steps to Reproduce
Click the profile icon in the header → dropdown opens.
Click on Login or Profile → dropdown remains visible for a moment on the next page.
Click outside → dropdown closes but snaps instantly.
Proposed Fix
1)Navigation State Sync : useLocation from react-router-dom and auto-close the dropdown whenever the route changes
2)Animated Dropdown Rendering : Instead of conditional rendering ({dashBoardOpen && (...)}), always keep the dropdown in the DOM and control its visibility via CSS classes.
Description
When clicking the profile icon in the header, the dropdown menu (Login/Profile/Logout) opens correctly.
However, it has two problems:
The dropdown does not close automatically when navigating to another page (e.g., clicking Login or Profile).
The dropdown closes instantly without a smooth transition, making the UX feel abrupt.
Expected Behavior
The dropdown should:
Close automatically when navigating to Login/Profile/Logout.
Close with a smooth fade/slide transition for better UX.
Where is the issue?
select Frontend or backend
Steps to Reproduce
Click the profile icon in the header → dropdown opens.
Click on Login or Profile → dropdown remains visible for a moment on the next page.
Click outside → dropdown closes but snaps instantly.
Proposed Fix
1)Navigation State Sync : useLocation from react-router-dom and auto-close the dropdown whenever the route changes
2)Animated Dropdown Rendering : Instead of conditional rendering ({dashBoardOpen && (...)}), always keep the dropdown in the DOM and control its visibility via CSS classes.