Meteorboard - Header component actions

Header.jsx

import Component from 'react-pure-render/component';
import React, {PropTypes} from 'react';

export default class Header extends Component {

  static propTypes = {
    actions: PropTypes.object.isRequired,
    pathname: PropTypes.string.isRequired,
    ui: PropTypes.object.isRequired
  }

  render() {
    const {actions, ui} = this.props;
    
    const arrowOrientation = ui.isSideMenuOpen ? 'fa fa-angle-right' : 'fa fa-angle-left';
    const navbarClassName = ui.isSideMenuOpen
          ? 'navbar clearfix mini-menu-open'
          : 'navbar clearfix';

    return (
      <header className={navbarClassName} id='header'>
          <div className='nav navbar-nav pull-left hidden-xs' id='navbar-left'>

            {/* Here we call action from onClick event. */}
            <div className='sidebar-collapse btn pull-left' onClick={actions.toggleSideMenu}>
              <i className={arrowOrientation}></i>
            </div>

            <div className='header-search form-group'>
              <div className='icon-addon addon-lg'>
                <input className='form-control' id='search' placeholder='Search...' type='text' />
                <label className='glyphicon glyphicon-search' title='Search'></label>
              </div>
            </div>
          </div>

          <ul className='nav navbar-nav pull-right'>
            {/* ... here is code for right menu... */}
          </ul>
      </header>
    );
  }

}