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.
Temporary State
When the Sidebar is in a temporary state, interacting outside of the Sidebar (hovering or tapping outside the Sidebar) while open will close it.
On small displays, Sidebars are always in a temporary state
On large displays, Sidebars temporarily open only if they are hovered over or tapped on while collapsed, clicking/tapping the expand button for large displays will remove the temporary state and keep the Sidebar open
In a temporary state, Sidebars hover over content when open instead of taking up space and pushing content over
Remembers previous open/close state
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.
Interactions
Large Displays
Large displays are defined as having a browser window width greater than or equal to 992px.
Toggle
Sidebar
Outside Sidebar
Click
open/close
n/a
n/a
Touch/Tap
open/close
n/a
n/a
Hover
show tooltip
if collapsed, temporarily open
if temporarily open, close
Small Displays
Small displays are defined as having a browser window width less than 992px and are always in a temporary state.
Toggle
Sidebar
Outside Sidebar
Click
temporarily open/close
n/a
n/a
Touch/Tap
temporarily open/close
temporarily open
close
Hover
show tooltip
temporarily open
close
Sidebar Sections
Sidebar Sections are used as direct children of the Sidebar to section off the content with a horizontal divider