content: import React from 'react';
  import { resolve } from '../styles';
  
  export default class BladeNav extends React.Component {
    static displayName = 'BladeNav';
    static propTypes={
      classes: React.PropTypes.object,
      items: React.PropTypes.object,
    };
  
    constructor(props) {
      super(props);
      this.state = {
        openBlade: 0,
        width: ~~(document.documentElement.clientWidth, window.innerWidth || 0) - (this.props.items.blades.length * 38),
      };
      window.addEventListener('resize', this.resize);
    }
    resize = () => {
      const { items } = this.props;
      const width = ~~(document.documentElement.clientWidth, window.innerWidth || 0);
      this.setState({
        width: width - (items.blades.length * 38),
      });
    }
    handleClick = (index) => {
      const alreadyOpen = index === this.state.openBlade;
      const setBlades = alreadyOpen ? null : index;
      this.setState({
        openBlade: setBlades,
      });
    };
  /* eslint react/jsx-no-bind: 0 */
    processItems = (config) => {
      const { classes } = this.props;
      const { blades } = config;
      const menu = blades.map((item, index) => {
        const isOpen = this.state.openBlade;
        return (
          <li key = {`key${index}`}
            onClick = {() => {this.handleClick(index);}}
            {...resolve(this.props, 'blade', isOpen === index ? 'open' : '')}
            style = {{ width: isOpen === index ? `${this.state.width}px` : '40px' }}
          >
            <h4 className={classes.label}>{item.name}</h4>
            <div className={classes.panel} style = {{ width: `${this.state.width - 80}px` }}>
              <div className={classes.content}>
              {item.child}
              </div>
            </div>
          </li>
        );
      });
  
      return menu;
    };
  
    render() {
      const { classes, items } = this.props;
      const menu = this.processItems(items);
      return (
        <ul className={classes.blades}>
         {menu}
        </ul>
      );
    }
  }
  