UI/UX bug : Navbar Menus Do Not Close Properly When Toggling Between Collapsed and Expanded States on Smaller Screens.

[AyushKumar123456789]

Description:

When the screen size is reduced to a point where the navbar collapses into a burger menu, if user menu was open within the navbar should close as expected. However, when the navbar is expanded again—by toggling the burger menu—the previously opened Usermenu will remain open instead of resetting to a closed state. Additionally, clicking the toggle icons of every menu inside the navbar not just user menu to close these menus does not work reliably; the menus either fail to close or the toggle functionality breaks. This issue impacts the usability of the navbar, especially on smaller screens or during browser resizing but work perfectly when change the device to phone or mobile.

Steps to reproduce:

1. Open the Rocket.Chat application in a desktop browser.
2. Ensure the screen width is large enough to display the navbar fully expanded.
3. Click on a navbar action button (e.g., Administration, Marketplace, or User Menu) to open its menu.
4. Reduce the screen width until the navbar collapses into a burger menu.
5. Observe that the open menu closes (this is expected).
6. Expand the screen width again to revert the navbar to its expanded state.
7. Notice that the previously opened menu remains open.
8. Now also try to decrease the size until the open menu goes to the bottom.
9. Now , Attempt to close the menu by clicking its toggle icon.

Expected behavior:

• When the navbar collapses into a burger menu due to a reduced screen size, all open menus should not open again automatically when the navbar is opened again.

• Clicking the toggle icons should consistently open and close the respective menus.

Actual behavior:

• After collapsing and then expanding the navbar, the previously opened user menus remain open instead of being reset to a closed state.
• The toggle icons do not function correctly, failing to close the menus reliably when the screen size is small but work perfectly in when different device is chosen in inspect widow.

Server Setup Information:

• Version of Rocket.Chat Server: 7.4.0-develop
• License Type:
• Number of Users: 2
• Operating System: Linux
• Deployment Method: Cloned from github
• Number of Running Instances: 1
• DB Replicaset Oplog: Enabled
• NodeJS Version: v22.11.0
• MongoDB Version: 7.0.5 / wiredTiger (oplog Enabled)

Client Setup Information

• Desktop App or Browser Version: Chrome
• Operating System: Linux

Additional context

Navbar.bug.mp4

Relevant logs:

[sahith-ch]

hi @AyushKumar123456789 can i work on this issue

[AyushKumar123456789]

Hey! I'm also a contributor here, just like you. I'm currently working on this issue, If you're looking to contribute, I will prefer you to read documentation https://gist.github.com/reetp/b0ba4e3d0ea2ff48ca9da00a5a647d42#github

[4shb0rne]

the button works when it we reduced the screen size via device toggle bar however

[AyushKumar123456789]

yes , it works when you change the device but not otherwise.