@dabapps/roe/src/ts/components/navigation/side-bar.examples.md

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

#### Examples

```js
import { Button, SideBar, Nav, NavItem } from '@dabapps/roe';

class SideBarExample extends React.Component {
  constructor() {
    this.state = {
      sideBarOpen: false,
    };

    this.openSideBar = () => {
      this.setState({
        sideBarOpen: true,
      });
    };

    this.closeSideBar = () => {
      this.setState({
        sideBarOpen: false,
      });
    };
  }

  render() {
    const { sideBarOpen } = this.state;

    return (
      <div>
        <Button onClick={this.openSideBar}>Open SideBar</Button>

        <SideBar onClickOutside={this.closeSideBar} open={sideBarOpen}>
          <Nav>
            <NavItem active>
              <a>One</a>
            </NavItem>
            <NavItem>
              <a>Two</a>
            </NavItem>
            <NavItem>
              <a>Three</a>
            </NavItem>
            <NavItem className="button hollow primary">
              <a>Logout</a>
            </NavItem>
          </Nav>
          <Button onClick={this.closeSideBar}>Close SideBar</Button>
        </SideBar>
      </div>
    );
  }
}

<SideBarExample />;
```

#### Less variables

```css
@side-bar-overlay-background: @overlay-background;
@side-bar-background: @body-background;
@side-bar-border: @border-base;
@side-bar-width: 250px;

@side-bar-z-index: 1200;
```