children elements for left nav

docs/src/app/components/app-left-nav.jsx

@@ -26,14 +26,13 @@ var AppLeftNav = React.createClass({
  var header = <div className="logo" onClick={this._onHeaderClick}>material ui</div>;
 
  return (
- <mui.LeftNav 
- ref="leftNav"
- docked={false}
- isInitiallyOpen={false}
- header={header}
- menuItems={menuItems}
- selectedIndex={this._getSelectedIndex()}
- onChange={this._onLeftNavChange} />
+ <mui.LeftNav ref="leftNav" docked={false}>
+ {header}
+ <mui.Menu
+ menuItems={menuItems}
+ zDepth={0}
+ onItemClick={this._onLeftNavChange} />
+ </mui.LeftNav>
  );
  },
 
@@ -52,6 +51,7 @@ var AppLeftNav = React.createClass({
 
  _onLeftNavChange: function(e, key, payload) {
  this.transitionTo(payload.route);
+ this.refs.leftNav.close();
  },
 
  _onHeaderClick: function() {

docs/src/app/components/pages/components/left-nav.jsx

@@ -2,6 +2,7 @@ var React = require('react');
 var mui = require('mui');
 var MenuItem = mui.MenuItem;
 var LeftNav = mui.LeftNav;
+var Menu = mui.Menu;
 var RaisedButton = mui.RaisedButton;
 var ComponentDoc = require('../../component-doc.jsx');
 
@@ -36,40 +37,25 @@ var LeftNavPage = React.createClass({
  ' },\n' +
  '];\n\n' +
  '//Docked Left Nav\n' +
- '<LeftNav menuItems={menuItems} />\n\n' +
+ '<LeftNav docked={this.state.isDocked}>'+ '\n' +
+ ' <Menu menuItems={menuItems} zDepth={0} />'+ '\n' +
+ '</LeftNav>' + '\n\n' +
+
  '//Hideable Left Nav\n' +
- '<LeftNav docked={false} menuItems={menuItems} />\n\n';
+ '<LeftNav docked={false}>'+ '\n' +
+ ' <Menu menuItems={menuItems} zDepth={0} />'+ '\n' +
+ '</LeftNav>';
 
  var componentInfo = [
  {
  name: 'Props',
  infoArray: [
- {
- name: 'menuItems',
- type: 'array',
- header: 'required',
- desc: 'JSON data representing all menu items to render.'
- },
  {
  name: 'docked',
  type: 'bool',
  header: 'default: true',
  desc: 'Indicates that the left nav should be docked. In this state, the ' +
  'overlay won\'t show and clicking on a menu item will not close the left nav.'
- },
- {
- name: 'header',
- type: 'element',
- header: 'optional',
- desc: 'A react component that will be displayed above all the menu items. ' +
- 'Usually, this is used for a logo or a profile image.'
- },
- {
- name: 'selectedIndex',
- type: 'number',
- header: 'optional',
- desc: 'Indicates the particular item in the menuItems array that is ' +
- 'currently selected.'
  }
  ]
  },
@@ -87,17 +73,6 @@ var LeftNavPage = React.createClass({
  desc: 'Toggles between the open and closed states.'
  }
  ]
- },
- {
- name: 'Events',
- infoArray: [
- {
- name: 'onChange',
- header: 'function(e, selectedIndex, menuItem)',
- desc: 'Fired when a menu item is clicked that is not the one currently ' +
- 'selected.'
- }
- ]
  }
  ];
 
@@ -110,8 +85,14 @@ var LeftNavPage = React.createClass({
  <div className="left-nav-example">
  <RaisedButton label="Toggle Docked Left Nav" onTouchTap={this._toggleDockedLeftNavClick} /><br/><br/>
  <RaisedButton label="Show Hideable Left Nav" onTouchTap={this._showLeftNavClick} />
- <LeftNav ref="dockedLeftNav" docked={this.state.isDocked} menuItems={menuItems} />
- <LeftNav ref="leftNav" docked={false} menuItems={menuItems} />
+
+ <LeftNav ref="dockedLeftNav" docked={this.state.isDocked}>
+ <Menu menuItems={menuItems} zDepth={0} />
+ </LeftNav>
+
+ <LeftNav ref="leftNav" docked={false}>
+ <Menu menuItems={menuItems} zDepth={0} />
+ </LeftNav>
  </div>
 
  </ComponentDoc>
@@ -132,4 +113,4 @@ var LeftNavPage = React.createClass({
 
 });
 
-module.exports = LeftNavPage;
+module.exports = LeftNavPage;

src/js/left-nav.jsx

@@ -3,19 +3,14 @@ var React = require('react'),
  Classable = require('./mixins/classable'),
  WindowListenable = require('./mixins/window-listenable'),
  Overlay = require('./overlay'),
- Paper = require('./paper'),
- Menu = require('./menu');
+ Paper = require('./paper');
 
 var LeftNav = React.createClass({
 
  mixins: [Classable, WindowListenable],
 
  propTypes: {
- docked: React.PropTypes.bool,
- header: React.PropTypes.element,
- onChange: React.PropTypes.func,
- menuItems: React.PropTypes.array.isRequired,
- selectedIndex: React.PropTypes.number
+ docked: React.PropTypes.bool
  },
 
  windowListeners: {
@@ -59,35 +54,21 @@ var LeftNav = React.createClass({
  if (!this.props.docked) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayTouchTap} />;
 
  return (
- <div className={classes}>
-
- {overlay}
- <Paper
- ref="clickAwayableElement"
- className="mui-left-nav-menu"
- zDepth={2}
- rounded={false}>
-
- {this.props.header}
- <Menu 
- ref="menuItems"
- zDepth={0}
- menuItems={this.props.menuItems}
- selectedIndex={selectedIndex}
- onItemClick={this._onMenuItemClick} />
-
- </Paper>
- </div>
+ React.createElement("div", {className: classes},
+
+ overlay,
+ React.createElement(Paper, {
+ ref: "clickAwayableElement",
+ className: "mui-left-nav-menu",
+ zDepth: 2,
+ rounded: false},
+
+ this.props.children
+ )
+ )
  );
  },
 
- _onMenuItemClick: function(e, key, payload) {
- if (!this.props.docked) this.close();
- if (this.props.onChange && this.props.selectedIndex !== key) {
- this.props.onChange(e, key, payload);
- }
- },
-
  _onOverlayTouchTap: function() {
  this.close();
  },
@@ -102,4 +83,4 @@ var LeftNav = React.createClass({
 
 });
 
-module.exports = LeftNav;
+module.exports = LeftNav;