Compass Layout Hardening #285
Description
Summary: Harden the new Compass Layout component for responsiveness and theming. This includes complex behavior such as collapsing headers, collapsible sidebars (nubbins), and conditional rendering of regions (footer/toolbars) based on content availability and screen size.
Scope / Child Issues:
- Cross-Theme QA: Ensure Compass Layout renders correctly in both Default and Unified themes.
- remove the 'isCircle' modifiers from the buttons in the demos so that they get their border radii from the theme tokens.
- Responsive Logic
- Header: Implement logic for the Compass Header to collapse into a toolbar at smaller breakpoints.
- Sidebar Toggles: Implement the sidebar toggle mechanism ("nubbin") for expanding/collapsing side panels.
- Conditional Region Rendering: Ensure regions (e.g., Footer Toolbar) do not render DOM elements if they have no children/content.
- Ensure pill/circle shaped buttons/menutoggles are being used in both default and unified themes in:
- compass header/footer
- compass sidebars
- compass docked nav(?)
- Developer Demos: Create documentation/demos showing how to conditionally render controls in different regions based on React + Media Queries.