Menu.js

/** @jsx React.DOM */
define(['react'], function(React) {

    var MenuItem = React.createClass({
        handleMenuClick: React.autoBind(function() {
            this.props.eventBus.emit('navigate.page.start', {page: this.props.data.page});
        }),
        render: function(){
            var active = this.props.isActive === true ? 'active' : '';
            return <li class={active}><a href="javascript:void(0)" onClick={this.handleMenuClick}><span class="hidden-tablet">{this.props.data.text}</span></a></li>;
        }
    });

    var MenuList = React.createClass({
        render: function() {
            var _that = this, menuItemList = this.props.data.map(function(menuItem){
                var active = (_that.props.activeMenuItem === menuItem.page);
                return <MenuItem isActive={active} data={menuItem} eventBus={_that.props.eventBus} />;
            });

            return <ul class="nav nav-tabs nav-stacked main-menu">{menuItemList}</ul>;
        }
    });

    var Menu = React.createClass({
        getInitialState: function(){
            return {page: 'overview'};
        },
        componentDidMount: function() {
            var _that = this;
            this.props.eventBus.on('navigate.page.finished', function(data) {
                _that.setState(data);
            });
        },
        render: function() {
            return (
                <div class="span2 main-menu-span">
                    <div class="nav-collapse sidebar-nav">
                        <MenuList activeMenuItem={this.state.page} data={this.props.data} eventBus={this.props.eventBus}/>
                    </div>
                </div>
                );
        }
    });

    return Menu;
});