[Docs] Use a single LeftNav

docs/src/app/app-routes.jsx

@@ -9,19 +9,16 @@ import {
 import Master from './components/master';
 import Home from './components/pages/home';
 
-import GetStarted from './components/pages/get-started';
 import Prerequisites from './components/pages/get-started/Prerequisites';
 import Installation from './components/pages/get-started/Installation';
 import Usage from './components/pages/get-started/Usage';
 import Examples from './components/pages/get-started/Examples';
 import Community from './components/pages/get-started/Community';
 
-import Customization from './components/pages/customization';
 import Colors from './components/pages/customization/colors';
 import Themes from './components/pages/customization/themes';
 import InlineStyles from './components/pages/customization/inline-styles';
 
-import Components from './components/pages/components';
 import AppBarPage from './components/pages/components/AppBar/Page';
 import AutoComplete from './components/pages/components/auto-complete';
 import AvatarPage from './components/pages/components/Avatar/Page';
@@ -66,7 +63,7 @@ const AppRoutes = (
   <Route path="/" component={Master}>
     <Route path="home" component={Home} />
     <Redirect from="get-started" to="/get-started/prerequisites" />
-    <Route path="get-started" component={GetStarted}>
+    <Route path="get-started">
       <Route path="prerequisites" component={Prerequisites} />
       <Route path="installation" component={Installation} />
       <Route path="usage" component={Usage} />
@@ -75,14 +72,14 @@ const AppRoutes = (
     </Route>
 
     <Redirect from="customization" to="/customization/themes" />
-    <Route path="customization" component={Customization}>
+    <Route path="customization">
       <Route path="colors" component={Colors} />
       <Route path="themes" component={Themes} />
       <Route path="inline-styles" component={InlineStyles} />
     </Route>
 
     <Redirect from="components" to="/components/app-bar" />
-    <Route path="components" component={Components}>
+    <Route path="components">
       <Route path="app-bar" component={AppBarPage} />
       <Route path="auto-complete" component={AutoComplete} />
       <Route path="avatar" component={AvatarPage} />

docs/src/app/components/MobileTearSheet.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import {StylePropable} from 'material-ui/lib/mixins';
 
 const MobileTearSheet = React.createClass({
-  mixins: [StylePropable],
+  mixins: [
+    StylePropable,
+  ],
 
   contextTypes: {
     muiTheme: React.PropTypes.object,
@@ -20,22 +22,19 @@ const MobileTearSheet = React.createClass({
   },
 
   render() {
-
-    let styles = {
+    const styles = {
       root: {
         float: 'left',
         marginBottom: 24,
         marginRight: 24,
         width: 360,
       },
-
       container: {
         border: 'solid 1px #d9d9d9',
         borderBottom: 'none',
         height: this.props.height,
         overflow: 'hidden',
       },
-
       bottomTear: {
         display: 'block',
         position: 'relative',

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

@@ -4,9 +4,13 @@ import List from 'material-ui/lib/lists/list';
 import ListItem from 'material-ui/lib/lists/list-item';
 import Divider from 'material-ui/lib/divider';
 import {SelectableContainerEnhance} from 'material-ui/lib/hoc/selectable-enhance';
-
-import {Colors, Spacing, Typography} from 'material-ui/lib/styles';
+import {
+  Colors,
+  Spacing,
+  Typography,
+} from 'material-ui/lib/styles';
 import {StylePropable} from 'material-ui/lib/mixins';
+
 const SelectableList = SelectableContainerEnhance(List);
 
 const AppLeftNav = React.createClass({
@@ -15,51 +19,75 @@ const AppLeftNav = React.createClass({
   ],
 
   propTypes: {
-    history: React.PropTypes.object,
-    location: React.PropTypes.object,
+    docked: React.PropTypes.bool.isRequired,
+    history: React.PropTypes.object.isRequired,
+    location: React.PropTypes.object.isRequired,
+    onRequestChangeLeftNav: React.PropTypes.func.isRequired,
+    onRequestChangeList: React.PropTypes.func.isRequired,
+    open: React.PropTypes.bool.isRequired,
+    style: React.PropTypes.object,
   },
 
   contextTypes: {
     muiTheme: React.PropTypes.object,
     router: React.PropTypes.func,
   },
 
-  getInitialState() {
-    return {
+  handleRequestChangeLink(event, value) {
+    window.location = value;
+  },
+
+  handleTouchTapHeader() {
+    this.props.history.push('/');
+    this.setState({
       leftNavOpen: false,
-    };
+    });
   },
 
   getStyles() {
     return {
-      cursor: 'pointer',
-      fontSize: 24,
-      color: Typography.textFullWhite,
-      lineHeight: Spacing.desktopKeylineIncrement + 'px',
-      fontWeight: Typography.fontWeightLight,
-      backgroundColor: Colors.cyan500,
-      paddingLeft: Spacing.desktopGutter,
-      marginBottom: 8,
+      logo: {
+        cursor: 'pointer',
+        fontSize: 24,
+        color: Typography.textFullWhite,
+        lineHeight: Spacing.desktopKeylineIncrement + 'px',
+        fontWeight: Typography.fontWeightLight,
+        backgroundColor: Colors.cyan500,
+        paddingLeft: Spacing.desktopGutter,
+        marginBottom: 8,
+      },
     };
   },
 
   render() {
+    const {
+      location,
+      docked,
+      onRequestChangeLeftNav,
+      onRequestChangeList,
+      open,
+      style,
+    } = this.props;
+
+    const styles = this.getStyles();
+
     return (
       <LeftNav
-        docked={false}
-        open={this.state.leftNavOpen}
-        onRequestChange={this.handleChangeRequestLeftNav}
+        style={style}
+        docked={docked}
+        open={open}
+        onRequestChange={onRequestChangeLeftNav}
       >
         <div
-          style={this.prepareStyles(this.getStyles())}
+          style={this.prepareStyles(styles.logo)}
           onTouchTap={this.handleTouchTapHeader}
         >
           material ui
         </div>
         <SelectableList
           valueLink={{
-            value: this.props.location.pathname,
-            requestChange: this.handleRequestChangeList,
+            value: location.pathname,
+            requestChange: onRequestChangeList,
           }}
         >
           <ListItem
@@ -195,8 +223,8 @@ const AppLeftNav = React.createClass({
                 primaryText="Refresh Indicator"
               />,
               <ListItem
-                value="/components/select-fields"
-                primaryText="Select Fields"
+                value="/components/select-field"
+                primaryText="Select Field"
               />,
               <ListItem
                 value="/components/sliders"
@@ -257,40 +285,6 @@ const AppLeftNav = React.createClass({
       </LeftNav>
     );
   },
-
-  toggle() {
-    this.setState({
-      leftNavOpen: !this.state.leftNavOpen,
-    });
-  },
-
-  handleChangeRequestLeftNav(open) {
-    this.setState({
-      leftNavOpen: open,
-    });
-  },
-
-  handleRequestChangeList(event, value) {
-    this.props.history.push(value);
-    this.setState({
-      leftNavOpen: false,
-    });
-  },
-
-  handleRequestChangeLink(event, value) {
-    window.location = value;
-    this.setState({
-      leftNavOpen: false,
-    });
-  },
-
-  handleTouchTapHeader() {
-    this.props.history.push('/');
-    this.setState({
-      leftNavOpen: false,
-    });
-  },
-
 });
 
 export default AppLeftNav;

docs/src/app/components/full-width-section.jsx

@@ -3,10 +3,12 @@ import {ClearFix, Mixins, Styles} from 'material-ui';
 let {StylePropable, StyleResizable} = Mixins;
 let DesktopGutter = Styles.Spacing.desktopGutter;
 
+const FullWidthSection = React.createClass({
 
-let FullWidthSection = React.createClass({
-
-  mixins: [StylePropable, StyleResizable],
+  mixins: [
+    StylePropable,
+    StyleResizable,
+  ],
 
   propTypes: {
     children: React.PropTypes.node,