Mobile Menu Stays Open on Desktop Resize

[Nandanikirtani]

📄 Description

When the hamburger menu is opened in mobile view and the screen is then resized to desktop view (lg: and above), the mobile menu remains visible on top of the desktop layout. This causes overlapping and layout issues.

🔍 Steps to Reproduce

1. Open the app on a mobile screen (or resize to mobile view)
2. Click the hamburger menu to open the mobile menu
3. Resize the window to desktop width (≥ 1024px)
4. ❌ Mobile menu stays open, overlapping desktop navbar

📱 Screenshot / Video (if any)

✅ Expected Behavior

• The mobile menu (isMobileMenuOpen) should automatically close when screen size transitions to desktop
• Desktop layout should render without overlapping mobile components

💡 Suggested Solution

• Add a window.resize event listener to automatically set isMobileMenuOpen = false when width ≥ 1024px
• Clean up the event listener on unmount

🙏 Additional Notes

This issue commonly occurs in responsive React apps using Tailwind and fixed navbars. Fixing it improves cross-device consistency.

Assign this issue to me

[Nandanikirtani]

Please add the labels on issue