[enhancement]: `UIShell/HeaderContainer` with multiple expandable panels

[lukas-kasticky]

Question for Carbon

Hi IBMer's,

UIShell/HeaderContainer has isSideNavExpanded and onClickSideNavExpand to control the sidenav/left-panel or the switcher/right-panel. The example containing both only implements the expand-logic of the side nav. How would I create a UI shell that uses two expandable panels? Am I supposed to implement my own version of HeaderContainer or is there a better way to go about this?

Thanks & have a nice day

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[lukas-kasticky]

As far as I can tell, carbondesignsystem.com itself uses the community maintained gatsby-theme-carbon, which implements this multi-expandable-panel behaviour in the Layout.js component where LeftNav, Switcher and Header aren't wrapped in a HeaderContainer. They all use NavContext.js instead. Are there maybe less complicated examples I could look into before I start hacking away?

[tw15egan]

@lukas-kasticky I see what you mean, it seems like we need to add isRightPanel / onRightPanelClick props added to HeaderContainer. Example of the issue when trying to use isSideNavExpanded for both: https://stackblitz.com/edit/github-9gaz77?file=src%2FApp.jsx

[lukas-kasticky]

Exactly, or an array of isFooExpandeds and onClickFooExpands which would come in handy with https://github.com/carbon-design-system/carbon/issues/5152, where i mentioned this issue.