react-conventions/docs/src/app/layout/Sidebar.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react'
import classNames from 'classnames';
import style from 'private/css/sidebar'
import Header from './Header'
import Nav from 'react-conventions/lib/Nav'
import NavData from 'private/config/NavData'
import SidebarToggle from './SidebarToggle'

class Sidebar extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  toggle = () => {
    if (this.props.onSidebarClick) {
      this.props.onSidebarClick(this);
    }
  }

  render() {
    let sidebarClass = this.props.collapsed ? style.sidebar : classNames(style.sidebar, style.visible);

    return (
      <div className={sidebarClass}>
        <SidebarToggle toggle={this.toggle.bind(this)} collapsed={this.props.collapsed} />
        <Header />
        <Nav data={NavData} />
      </div>
    )
  }
}

export default Sidebar