Add layout for components in doc

components/app_bar/index.jsx

@@ -4,6 +4,8 @@ import style from './style';
 const AppBar = (props) => {
   let className = style.appbar;
   if (props.className) className += ` ${props.className}`;
+  if (props.fixed) className += ` ${style.fixed}`;
+  if (props.flat) className += ` ${style.flat}`;
 
   return (
     <header className={className}>
@@ -13,11 +15,15 @@ const AppBar = (props) => {
 };
 
 AppBar.propTypes = {
-  className: React.PropTypes.string
+  className: React.PropTypes.string,
+  fixed: React.PropTypes.bool,
+  flat: React.PropTypes.bool
 };
 
 AppBar.defaultProps = {
-  className: ''
+  className: '',
+  fixed: false,
+  flat: false
 };
 
 export default AppBar;

components/app_bar/style.scss

@@ -8,7 +8,19 @@
   padding: 0 $appbar-h-padding;
   color: $appbar-contrast;
   background: $appbar-color;
-  box-shadow: 0 2px 5px rgba(0,0,0,.26);
+
+  &:not(.flat) {
+    z-index: $z-index-higher;
+    box-shadow: 0 2px 5px rgba(0,0,0,.26);
+  }
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $z-index-higher;
+  }
 
   a {
     color: $appbar-contrast;

components/menu/menu_item.jsx

@@ -6,6 +6,7 @@ import style from './style.menu_item';
 class MenuItem extends React.Component {
   static propTypes = {
     caption: React.PropTypes.string,
+    className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     icon: React.PropTypes.string,
     ripple: React.PropTypes.bool,
@@ -14,6 +15,7 @@ class MenuItem extends React.Component {
   };
 
   static defaultProps = {
+    className: '',
     disabled: false,
     ripple: false,
     selected: false
@@ -33,9 +35,9 @@ class MenuItem extends React.Component {
 
   render () {
     let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
     if (this.props.selected) className += ` ${style.selected}`;
     if (this.props.disabled) className += ` ${style.disabled}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
       <li

docs/app/components/_globals.scss

@@ -1,4 +1,8 @@
+@import "~react-toolbox/base";
+
 $unit: 1rem;
 $color-primary-dark: #303f9f;
 $color-primary-light: #3f51b5;
 $color-primary-contrast: #fff;
+$color-divider: $color-divider;
+$color-content: #fafafa;

docs/app/components/layout/main/index.jsx

@@ -1,6 +1,6 @@
 /*eslint-disable no-unused-vars*/
 import React from 'react';
-import { AppBar } from 'react-toolbox';
+import { AppBar, List, ListItem, ListSubHeader } from 'react-toolbox';
 import { Link } from 'react-router';
 import Logo from './../../logo';
 import Navigation from './../../navigation';
@@ -9,7 +9,7 @@ import style from './style';
 const Main = (props) => {
   return (
     <div>
-      <AppBar className={style.appbar}>
+      <AppBar className={style.appbar} flat fixed>
         <Link to='/' className={style.brand}>
           <Logo className={style.logo} />
           React Toolbox
@@ -17,7 +17,18 @@ const Main = (props) => {
         <Navigation className={style.navigation}/>
       </AppBar>
 
-      { props.children }
+      <div className={style['content-wrapper']}>
+        <List className={style.drawer} selectable ripple>
+          <ListItem className={style['drawer-option']} caption='AppBar' />
+          <ListItem className={style['drawer-option']} caption='Autocomplete' />
+          <ListItem className={style['drawer-option']} caption='Button' />
+          <ListItem className={style['drawer-option']} caption='Cards' />
+        </List>
+
+        <div className={style.content}>
+          { props.children }
+        </div>
+      </div>
     </div>
   );
 };

docs/app/components/layout/main/style.scss

@@ -1,6 +1,5 @@
-@import "~react-toolbox/base";
-@import "~react-toolbox/app_bar/config";
 @import "../../globals";
+@import "~react-toolbox/app_bar/config";
 @import "./config";
 
 .appbar {
@@ -9,8 +8,8 @@
 }
 
 .brand {
-  position: relative;
   @include typo-title;
+  position: relative;
   display: inline-block;
   padding-top: $appbar-brand-v-padding;
   padding-bottom: $appbar-brand-v-padding;
@@ -44,3 +43,27 @@
     }
   }
 }
+
+.content-wrapper {
+  display: flex;
+  min-height: 100vh;
+}
+
+.drawer {
+  max-width: 22 * $unit;
+  min-height: 100%;
+  margin-top: $appbar-height;
+  border-right: 1px solid $color-divider;
+}
+
+.drawer-option {
+  padding-left: $appbar-h-padding;
+}
+
+.content {
+  z-index: $z-index-low;
+  flex-grow: 1;
+  padding: .8 * $unit $appbar-h-padding;
+  margin-top: $appbar-height;
+  background-color: $color-content;
+}