Meteorboard - sidebar creating menu dynamically

App.jsx

import './main.less';
import Component from 'react-pure-render/component';
import createSidebarMenu from '../lib/createSidebarMenu';
import {Grid, Row, Col} from 'react-bootstrap';
import Header from './Header.react';
import Sidebar from '../components/Sidebar.react';
import React, {PropTypes} from 'react';
import RouterHandler from '../../common/components/RouterHandler.react';
import * as ProfileMenu from './ProfileMenu';
import * as MainMenu from './MainMenu';
import mapDispatchToProps from '../../common/app/mapDispatchToProps';
import mapStateToProps from '../../common/app/mapStateToProps';
import {connect} from 'react-redux';

@connect(mapStateToProps, mapDispatchToProps)
export default class App extends Component {

  static propTypes = {
    actions: PropTypes.object.isRequired,
    children: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    msg: PropTypes.object.isRequired,
    ui: PropTypes.object.isRequired,
    users: PropTypes.object.isRequired
  }

  createMenu(menu) {
    return createSidebarMenu(menu);
  }

  render() {
    const {location: {pathname}, msg, users: {viewer}, ui, actions} = this.props;

    return (
      <div>
        <Header />
        <Sidebar location={pathname} mainMenu={this.createMenu(MainMenu)} profileMenu={this.createMenu(ProfileMenu)} />
        {/* Pass data-pathname to allow route specific styling. */}
        <section id='page'>
          <div id='main-content'>
            <Grid>
              <Row>
                <Col id='content' lg={12}>
                  <Row>
                    <Col md={12}>
                      <RouterHandler {...this.props} />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Grid>
          </div>
        </section>
      </div>
    );
  }

}