Sidebar

Commonly, Sidebars will contain a SideNav but can also contain other content when necessary.

<State initial={0}>
	{([active, setActive]) => (
		<Frame>
			<Page
				sidebar={
					<Sidebar localStorageKey="sidebar__default">
						<Sidebar.Section padding="y">
							<SideNav title="Marketing">
								<SideNav.Item onClick={() => setActive(0)} active={active===0}>Dashboard</SideNav.Item>
								<SideNav.Item onClick={() => setActive(1)} active={active===1}>Campaigns</SideNav.Item>
								<SideNav.Item onClick={() => setActive(2)} active={active===2}>Emails</SideNav.Item>
								<SideNav.Item onClick={() => setActive(3)} active={active===3}>Audiences</SideNav.Item>
							</SideNav>
						</Sidebar.Section>
						<Sidebar.Section>
							<Card onClick={() => setActive(4)} active={active===4}>Test</Card>
						</Sidebar.Section>
					</Sidebar>
				}
			>
				Page Content
			</Page>
		</Frame>
	)}
</State>

Behavior

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.

Small Displays

Small displays are defined as having a browser window width less than 992px and are always in a temporary state.

Sidebar Sections

Sidebar Sections are used as direct children of the Sidebar to section off the content with a horizontal divider

<State initial={0}>
	{([active, setActive]) => (
		<Sidebar localStorageKey="sidebar__sidebar-sections">
			<Sidebar.Section>
				Section 1
			</Sidebar.Section>
			<Sidebar.Section>
				Section 2
			</Sidebar.Section>
			<Sidebar.Section>
				Section 3
			</Sidebar.Section>
		</Sidebar>
	)}
</State>

Best practices

• Sidebars should be within a Page
• Sidebars should be given a static unique localStorageKey prop value