Canvas Kit Side Panel
A component that provides a container for navigation elements. It provides options to be opened from either the left or right side of the screen.
Installation
yarn add @workday/canvas-kit-react
or
yarn add @workday/canvas-kit-react-side-panel
Side Panel
Usage
import * as React from 'react';
import {Button, IconButton} from '@workday/canvas-kit-react-button';
import SidePanel from '@workday/canvas-kit-react-side-panel';
interface SidePanelState {
open: boolean;
}
class SidePanelExample extends React.Component<{}, SidePanelState> {
public state = {
open: true,
};
public render() {
const {open} = this.state;
return (
<SidePanel
backgroundColor={SidePanel.BackgroundColor.Gray}
openDirection={SidePanel.OpenDirection.Left}
open={open}
onToggleClick={this.onClick}
breakpoint={800}
onBreakpointChange={this.handleBreakpoint}
header={'Side Panel Header'}
>
{open ? (
<Button variant={Button.Variant.Primary}>Add New</Button>
) : (
<IconButton size={IconButton.Size.Small} variant={IconButton.Variant.Filled}>
<SystemIcon icon={plusIcon} />
</IconButton>
)}
<ul>
<li css={listItemStyles}>{open && <span>Home</span>}</li>
<li css={listItemStyles}>{open && <span>Favorites</span>}</li>
<li css={listItemStyles}>{open && <span>Items</span>}</li>
</ul>
</SidePanel>
);
}
private onClick = () => {
this.setState({
open: !this.state.open,
});
};
private handleBreakpoint = (open: boolean) => {
this.setState({
open: open,
});
};
}
Static Properties
OpenDirection: SidePanelOpenDirection
<SidePanel open={true} openDirection={SidePanel.OpenDirection.Left} />
BackgroundColor: SidePanelBackgroundColor
<SidePanel open={true} backgroundColor={SidePanel.BackgroundColor.Gray} />
Component Props
Required
open: boolean
Determines if the side panel is open or closed.
Optional
onBreakpointChange: (aboveBreakpoint: boolean) => void;
A function that is called when the screen size changes and reaches
breakpoint
. For example, if the user has their window at 1000px of width, and then resizes, this will get called when the window size reaches the value of thebreakpoint
prop. A boolean for whether the current window size is above or below the breakpoint is provided so you can controlopen
based on the change.
onToggleClick: () => void
Callback that handles clicking toggle button to open or close the side panel. The toggle button will only show if this prop is defined.
header: string | React.ReactNode
Custom title or element to display as a header to the side panel.
closeNavigationLabel: string
Aria label for closing the navigation
openNavigationLabel: string
Aria label for opening the navigation
backgroundColor: SidePanelBackgroundColor
Determines the background color of the side panel when it's
open
SidePanelBackgroundColor.White
or SidePanelBackgroundColor.Gray
or
SidePanelBackgroundColor.Transparent
Default: SidePanelBackgroundColor.White
openDirection: SidePanelOpenDirection
Determines from what side the side panel opens
SidePanelOpenDirection.Left
or SidePanelOpenDirection.Right
Default: SidePanelOpenDirection.Left
padding: CanvasSpacingValue
Adjust padding of the side panel when it's open.
Default: 24px
breakpoint: number
The width at which the window size must be in order for
onBreakPointChange
to fire. Default value based on Ipad Landscape: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
Default: 768px
openWidth: number
Determines the width of the side panel when it's open.
Default: 300px