[BUG] - Mobile navbar doesn't disappear when resizing

[JacobThaDev]

Describe the bug

If you open the mobile menu and resize the browser, the mobile menu doesn't close itself and there's no way to close it until you resize it back down and hit close button.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. resize window so the mobile navbar is active
2. open the mobile navbar
3. resize window so it's no longer in mobile view and back to desktop

Expected behavior

when resized while the mobile menu is open, it should hide itself

Screenshots or Videos

https://user-images.githubusercontent.com/13415222/187007240-5c84ef28-2ea2-4325-ac2e-9035efafa791.mp4

Operating System Version

Windows 11 22000.856

Browser

Chrome

[sun0day]

It can be reproduced in https://nextui.org/docs/components/navbar#with-avatar-user

A quick but not elegant solution is that keep Navbar.Toggle and Navbar.Collapse showIn equal

<Navbar.Toggle showIn="xs" />
<Navbar.Collapse showIn="xs">

Splitting Navbar.Toggle and Navbar.Collapse into two components maybe not be a good design.

On the other hand, using js to control responsive media instead is better. @jrgarciadev

[jrgarciadev]

Hey please update to v2.0 https://nextui.org/blog/nextui-v2

https://nextui.org/docs/components/navbar#controlled-menu