Option To Decouple Collapse Behaviour For Multiple Sidebars On The Same Page

[Kristian4078]

The scenario

Having more than one collapsible sidebar on the same page that collapses in isolation is not possible. Due to the flux-sidebar-toggle event listener listening on the entire document rather than in the scope of it's own sidebar.

The problem

I found that in the sidebar.js you are listening for the flux-sidebar-toggle on the entire document, this causes all sidebars on the page to collapse at once, when the intent should only be to collapse the side bar we are in the context of.

The solution

By changing the event listener from. document.addEventListener("flux-sidebar-toggle" to this.addEventListener("flux-sidebar-toggle" in Sidebar.js we can allow for sidebars to collapse themselves and not other sidebars on the page

I understand we may want functionality to collapse and expand all sidebar by a single click to action, but I would love the functionality to be able to decouple the collapse functionality with a sidebar property PLEASE 😄

Demo video

Untitled.1.mp4