A Sidebar is a 240px expanded / 64px collapsed vertical content area to the left of a Page. A Sidebar should be used within a Page to have correct positioning and structure. Its look and behavior adjusts to the screen width and whether or not it's on a touchscreen.
Commonly, Sidebars will contain a SideNav but can also contain other content when necessary.
Sidebars are responsive and will collapse if it is within a browser window smaller than 992px. The biggest difference in behavior is between large displays and small displays. On large displays the open/close state is stored in the browser's
localStorage. On small displays, the Sidebar is always in a temporary state and it's open/close state is not saved.
When the Sidebar is in a temporary state, interacting outside of the Sidebar (hovering or tapping outside the Sidebar) while open will close it.
The Sidebar remembers and restores the previous non-temporary open/close state across user sessions and window resizes. Since small displays are always temporary, only the state of large displays are saved. Each Sidebar instance remembers its own state as long as a static unique
localStorageKey prop is given.
Large displays are defined as having a browser window width greater than or equal to 992px.
Small displays are defined as having a browser window width less than 992px and are always in a temporary state.
Sidebar Sections are used as direct children of the Sidebar to section off the content with a horizontal divider