Meteorboard - sidebar changing

Sidebar.jsx

import Component from 'react-pure-render/component';
import React, {PropTypes} from 'react';
import SidebarMenu from './SidebarMenu.react';
import {Image} from 'react-bootstrap';
import {Link} from 'react-router';

export default class Sidebar extends Component {

  static propTypes = {
    location: PropTypes.string.isRequired,
    mainMenu: PropTypes.object.isRequired,
    profileMenu: PropTypes.object.isRequired,
    ui: PropTypes.object.isRequired
  }

  render() {
    const pathname = this.props.location;
    
    const sidebarOpen = this.props.ui.isSideMenuOpen;
    const miniMenu = sidebarOpen ? 'sidebar mini-menu' : 'sidebar';
    
    const mainMenu = this.props.mainMenu.children()
      .map((menu, i) => <SidebarMenu key={i} location={pathname} menu={menu} />);

    const profileMenu = this.props.profileMenu.children()
      .map((menu, i) => <SidebarMenu key={i} location={pathname} menu={menu} />);

    return (

      <div className={miniMenu} id="sidebar">
        <Link to='/'>
          <Image circle className='profile-pic' src="img/profile/twitter-avatar.png" />
        </Link>
        <div className="sidebar-menu nav-collapse">
          <div className="divide-20"></div>
          <ul>
            {profileMenu}
            <div className='divide-20'></div> // small space between menus
            {mainMenu}
            <div className='divide-20'></div>
          </ul>
        </div>
      </div>
    );
  }
}