Enhance Header and ToggleSwitch Components to Close Navbar on Theme Toggle

[saadrasheeddev]

Overview:
This update improves user experience by automatically closing the navigation menu when the theme is toggled in the header. This change ensures that users receive immediate feedback when switching between light and dark modes, maintaining a clean interface.

Changes Made:

1. Header Component:

   • Introduced a useRef hook to manage the state of the menu checkbox.
   • Added a handleMenuItemClick function to programmatically uncheck the menu when a menu item is clicked or the theme is toggled.
   • Passed handleMenuItemClick as a prop to the ToggleSwitch component for integration.

2. ToggleSwitch Component:

   • Updated to accept the handleMenuItemClick function as a prop.
   • Called handleMenuItemClick within the onChange event of the checkbox, ensuring the navbar closes when the theme is toggled.

Benefits:

• Improved user experience by ensuring that the navigation menu closes upon theme change, preventing any UI clutter.
• Maintained functionality and responsiveness of the header component.

Related Issues:

• resolves issue Make the navbar automatically close once we toggle the mode(light/dark) for a better user experience. #735

Testing:

• Verified that toggling the theme properly closes the navbar.
• Ensured all existing functionalities of the header and toggle switch remain intact.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
developer-folio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 19, 2024 4:32am