Sidebar component by default appears on left side of the screen as fixed positioned element. In most cases it should be used with <Backdrop> component to provide 'click outside' functionality as well as with <Portal> so it gets rendered outside of the DOM hierarchy of the parent component.

xxxxxxxxxx

import { Sidebar } from '@deity/falcon-ui';

<Toggle initial={false}>

  {({ on, toggle }) => (

    <React.Fragment>

      <Button onClick={toggle}>Toggle sidebar</Button>

      <Sidebar as={Portal} visible={on}>

        <H1 p="lg">Hello!</H1>

      </Sidebar>

      <Backdrop onClick={toggle} as={Portal} visible={on} />

    </React.Fragment>

  )}

</Toggle>

Sidebar specific props

Sidebar component accepts also all of the responsive, theme-based style props.