Page - add top-level modifiers to indicate nav expanded/collapsed, horizontal nav, etc #7377
Description
Re: patternfly/patternfly-doc-core#26
Right now the style that control nav expanded/collapsed, and whether the main content takes up the entire viewport or not are dependent on markup structure (eg .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container).
This is fragile and is currently not working in our docs framework (from the issue linked above) because the structure is roughly this below and __sidebar is not a sibling of __main-container.
div.pf-c-page
div.pf-c-masthead
astro-island // which has `display: contents;`
div.pf-c-page__sidebar
div.pf-c-page__main-container
The page component should be able to dictate the grid layout for its children. It would be great if we had classes that could be used to indicate the states we have today:
- sidebar is open
- on mobile, sidebar overlays content and content spans full width of page grid
- on desktop, sidebar takes up left part of page grid, main content takes up right part
- sidebar is collapsed
- sidebar is off screen, main content spans full width of page grid
- page has horizontal nav
- content spans full width of page grid