Collapsing sections doesn't work on mobile

AI-generated summary

The discussion Collapsing sections doesn’t work on mobile revolves around a bug where collapsing sections on a Discourse forum doesn’t work on mobile devices. Arkshine identifies the issue and provides steps to reproduce it, along with a potential code fix. sam tags @CvX and @saquetim for their input. saquetim confirms the issue affects the admin sidebar and suggests it has been present since a specific GitHub pull request. To fix the issue, saquetim proposes forcing sections to be collapsable in mobile mode or on narrow screens, and provides a pull request to address the problem.

  1. Go to https://meta.discourse.org/c/documentation/using-discourse/126?mobile_view=1
  2. Open the menu
  3. Collapse all the sections
    image
  4. Now, you can’t expand any sections.

The image showcases a Discourse forum page with various discussion topics listed on the left, while the right side displays a series of faq questions including "Understanding post flags in Discourse" and "Creating and managing calendars." (Captioned by AI)

A quick look shows me that it misses a return here:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.gjs#L42

Also, it seems that no collapsableSections argument is ever passed (could be wrong).
Side-effect of DEV: Convert the entire sidebar to gjs by cvx · Pull Request #26978 · discourse/discourse · GitHub.

2 Likes

@cvx / @saquetim any ideas here?

This issue is also affecting the admin sidebar.

It looks like it has been like this since: UX: Sections not collapsable in "header dropdown" navigation menu by tgxworld · Pull Request #21604 · discourse/discourse · GitHub

The problem is that we’re forcing the sections to be collapsable in mobile view or narrow screens when the navigation menu is set to header dropdown, but we’re not handling the case where it is set to sidebar.

To address the issue, I believe we should force the sections to always be collapsable when in mobile mode or on narrow screens.

The PR below should fix this:

https://github.com/discourse/discourse/pull/31383

2 Likes