Doc Site - Added left nav examples

Author: hai-cea

docs/dist/js/left-nav.jsx

@@ -13,11 +13,11 @@ var LeftNav = React.createClass({
 
   propTypes: {
     docked: React.PropTypes.bool,
-    onChange: React.PropTypes.func,
     header: React.PropTypes.element,
+    isInitiallyOpen: React.PropTypes.bool,
+    onChange: React.PropTypes.func,
     menuItems: React.PropTypes.array.isRequired,
-    selectedIndex: React.PropTypes.number,
-    isInitiallyOpen: React.PropTypes.bool
+    selectedIndex: React.PropTypes.number
   },
 
   getDefaultProps: function() {

docs/src/app/app-routes.jsx

@@ -21,6 +21,7 @@ var React = require('react'),
   Dialog = require('./components/pages/components/dialog.jsx'),
   Icons = require('./components/pages/components/icons.jsx'),
   Inputs = require('./components/pages/components/inputs.jsx'),
+  LeftNav = require('./components/pages/components/left-nav.jsx'),
   Menus = require('./components/pages/components/menus.jsx'),
   Paper = require('./components/pages/components/paper.jsx'),
   Switches = require('./components/pages/components/switches.jsx'),
@@ -37,6 +38,7 @@ var React = require('react'),
     { route: 'icons', text: 'Icons'},
     { route: 'inputs', text: 'Inputs'},
     { route: 'menus', text: 'Menus'},
+    { route: 'left-nav', text: 'Left Nav'},
     { route: 'paper', text: 'Paper'},
     { route: 'switches', text: 'Switches'},
     //{ route: 'toasts', text: 'Toasts'},
@@ -59,6 +61,7 @@ var AppRoutes = (
         <Route name="dialog" handler={Dialog} />
         <Route name="icons" handler={Icons} />
         <Route name="inputs" handler={Inputs} />
+        <Route name="left-nav" handler={LeftNav} />
         <Route name="menus" handler={Menus} />
         <Route name="paper" handler={Paper} />
         <Route name="switches" handler={Switches} />

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

@@ -32,6 +32,7 @@ var AppLeftNav = React.createClass({
     return (
       <mui.LeftNav 
         ref="leftNav"
+        docked={false}
         isInitiallyOpen={false}
         header={header}
         menuItems={menuItems}

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

@@ -0,0 +1,64 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react'),
+  mui = require('mui'),
+  LeftNav = mui.LeftNav,
+  PaperButton = mui.PaperButton,
+  CodeExample = require('../../code-example/code-example.jsx'),
+
+  menuItems = [
+    { route: 'get-started', text: 'Get Started' },
+    { route: 'css-framework', text: 'CSS Framework' },
+    { route: 'components', text: 'Components' },
+    { type: mui.MenuItem.Types.SUBHEADER, text: 'Resources' },
+    { type: mui.MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' }
+  ];
+
+var ButtonPage = React.createClass({
+
+  render: function() {
+    var code = 
+      'menuItems = [\n' +
+      '  { route: \'get-started\', text: \'Get Started\' },\n' +
+      '  { route: \'css-framework\', text: \'CSS Framework\' },\n' +
+      '  { route: \'components\', text: \'Components\' },\n' +
+      '  { type: mui.MenuItem.Types.SUBHEADER, text: \'Resources\' },\n' +
+      '  { \n' +
+      '     type: mui.MenuItem.Types.LINK, \n' +
+      '     payload: \'https://github.com/callemall/material-ui\', \n' +
+      '     text: \'GitHub\' \n' +
+      '  },\n' +
+      '];\n\n' +
+      '//Docked Left Nav\n' +
+      '<LeftNav menuItems={menuItems} />\n\n' +
+      '//Hideable Left Nav\n' +
+      '<LeftNav docked={false} isInitiallyOpen={false} menuItems={menuItems} />\n\n';
+      
+    return (
+      <div>
+        <h2 className="mui-font-style-headline">Left Nav</h2>
+        <CodeExample code={code}>
+          <div className="left-nav-example">
+            <PaperButton label="Toggle Docked Left Nav" onClick={this._toggleDockedLeftNavClick} /><br/>
+            <PaperButton label="Show Hideable Left Nav" onClick={this._showLeftNavClick} />
+            <LeftNav ref="dockedLeftNav" isInitiallyOpen={false} menuItems={menuItems} />
+            <LeftNav ref="leftNav" docked={false} isInitiallyOpen={false} menuItems={menuItems} />
+          </div>
+        </CodeExample>
+      </div>
+    );
+  },
+
+  _showLeftNavClick: function() {
+    this.refs.leftNav.toggle();
+  },
+
+  _toggleDockedLeftNavClick: function() {
+    this.refs.dockedLeftNav.toggle();
+  }
+
+});
+
+module.exports = ButtonPage;

docs/src/less/main.less

@@ -113,7 +113,7 @@ a {
 .code-example {
 	max-width: (@desktop-keyline-increment * 14);
 	background-color: @white;
-	margin-bottom: 80px;
+	margin-bottom: 32px;
 
 	.example-label {
 		.mui-font-style-menu;