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

[5AIPAVAN]

Describe the bug

For a screen size <=770px, we can improve the user experience by making the navbar close automatically when the user toggled the mode switch button(light/dark)

Steps to reproduce

Add a function in ../ToggleSwitch/ToggleSwitch component -> that makes the navbar close once we toggle the switch mode button.

Expected behavior

After toggle the navbar must close automatically once the mode is changed

Is this responsiveness Issue

NO

Screenshots

Desktop

• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Version: [e.g. 22]

Smartphones

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

No response

[mobmaestro]

@5AIPAVAN can you please assign this issue to me?

[SaunakNandi]

@5AIPAVAN this actually looks more like a feature request than a bug.

[sufiankhan-dev]

@saadpasta Assign this to me! I'll fix this

[TanishaPatidar]

Is this issue solved or still open to fix?

[MJBranco18]

Hi, I created this PR to Fix this! Check it out when you can! #780

[dev-Vortex51]

Hi 👋,

While looking into the issue of the navbar not closing automatically when toggling between light and dark modes, I realized this behavior impacts the overall user experience. I’d love to help fix this so that the navbar auto-closes upon theme change.

In the process, I also noticed a few areas for potential improvement:

The layout structure could be more maintainable.

The responsiveness (especially on smaller screens) could be improved.

The theme toggle experience and transitions could be made more polished.

I'd love to contribute by:

Fixing the toggle issue.

Refactoring the layout and navigation in small, manageable steps.

Proposing some light improvements to the theme toggle behavior.

Would you be open to me working on this? I can start with a small PR to fix the toggle behavior and improve the navbar, then take further steps based on your feedback.

[Debdip2003]

The issue is now fixed , just added useEffect hook in the Header.js file that changes on the change of IsDark that is coming from StyleContext.