Add collapsible Batch Connect app sidebar menus

[iliketocode2]

Summary

This is a proposed frontend change to the Batch Connect pages' left sidebar which lists many apps grouped in cards. On sites with large catalogs, that sidebar forces long vertical scrolling. This PR makes each app-group card collapsible: the header acts as a toggle; the list starts collapsed on every page load so users expand only what they need. This could later be expanded to also allow each subheader/subsection to collapse as well.

• Note 1: that the state does not persist, rather I've set it up so the menus render in a collapsed state each time the user navigates to a page that contains a sidebar.

Implementation

Files:

• _app_list.html.erb: The card header is a <button> with aria-expanded/aria-controls. The list region has an id built from a slug of the card title (parameterize(separator: "_")) to match the OOD CONTRIBUTING HTML id conventions
• sidebar_collapsible.js: Initializes cards collapsed on DOMContentLoaded and turbo:load; with a single click listener on document.
• sessions.scss: Added the relevant styles for the closed/open states (.is-open) and the chevrons
• application.js: Imports the sidebar module once with the main bundle.

Tests:

• System test in batch_connect_sessions_test.rb asserting that the toggle behavior is correct via aria-expanded and is-open.

Results:

Collapsed menu when first navigating to an app page:

One manually opened section in the Interactive Apps page:

[johrstrom]

I'm pretty sure you can implement this a lot easier with bootstrap collapse. I.e., you don't have to write your own javascript event handlers and so on.

https://getbootstrap.com/docs/5.3/components/collapse/

[iliketocode2]

Yes, this is an excellent call. Thank you for the feedback! I've implemented the bootstrap changes instead.

[johrstrom]

Thanks for the update. I have 2 things in mind:

• I don't think it should default to collapsed. My thinking is it's easier to spot that something is collapsable than to spot something that is expandable. I.e., I don't think folks will immediately recognize that it's expandable even with the icon.
• I'm worried about the amount of CSS you've supplied. Seems to me that you wouldn't need most of it.

[iliketocode2]

Made both changes-- The menus start expanded and the css is simplified further. I wasn't able to remove that much css as I need to ensure the chevron remains in the proper location, but let me know if you had an even more significant code reduction in mind and I can try a more serious rework.