[WIP] AppBar DOM-like structure

docs/src/app/components/master.jsx

@@ -9,7 +9,7 @@ var Colors = mui.Styles.Colors;
 var Typography = mui.Styles.Typography;
 var ThemeManager = new mui.Styles.ThemeManager();
 
-var { AppBar, AppCanvas, Menu, IconButton } = mui;
+var { AppBar, AppBarGroup, AppBarTitle, AppCanvas, Menu, IconButton, SvgIcon } = mui;
 
 class Master extends React.Component {
 
@@ -63,15 +63,21 @@ class Master extends React.Component {
 
     return (
       <AppCanvas>
-
-        <AppBar
-          onLeftIconButtonTouchTap={this._onLeftIconButtonTouchTap}
-          title={title}
-          zDepth={0}
-          iconElementRight={githubButton}/>
+        <AppBar zDepth={1}>
+      	  <AppBarGroup key={0} style={{ float: 'left' }}>
+            <IconButton onTouchTap={this._onLeftIconButtonTouchTap}>
+              <SvgIcon>
+                <path fill="rgba(255, 255, 255, 0.87)" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+              </SvgIcon>
+            </IconButton>
+            <AppBarTitle text={title}/>
+      	  </AppBarGroup>
+          <AppBarGroup key={1} style={{ float: 'right' }}>
+            {githubButton}
+      	  </AppBarGroup>
+      	</AppBar>
 
         <AppLeftNav ref="leftNav" />
-
         <RouteHandler />
 
         <FullWidthSection style={styles.footer}>

docs/src/app/components/pages/components/app-bar.jsx

@@ -2,14 +2,14 @@ var React = require('react');
 var mui = require('mui');
 var ComponentDoc = require('../../component-doc.jsx');
 
-var {AppBar, DropDownMenu} = mui;
+var {AppBar, AppBarGroup, AppBarTitle, DropDownMenu, FontIcon, IconButton, RaisedButton } = mui;
 
 class AppBarPage extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.code = 
+    this.code =
           '<AppBar title=\'Title\' iconClassNameRight="muidocs-icon-navigation-expand-more"/>';
 
     this.desc = 'App bars are a collection of components placed as a static ' +
@@ -82,7 +82,7 @@ class AppBarPage extends React.Component {
             desc: 'The zDepth of the app bar. The shadow of the app bar is also ' +
                   'dependent on this property.'
           }
-        ] 
+        ]
       },
       {
         name: 'Events',
@@ -92,7 +92,7 @@ class AppBarPage extends React.Component {
             header: 'AppBar.onLeftIconButtonTouchTap(e)',
             desc: 'Callback function for when the left icon is selected via ' +
                   'a touch tap.'
-          }, 
+          },
           {
             name: 'onRightIconButtonTouchTap',
             header: 'AppBar.onRightIconButtonTouchTap(e)',
@@ -105,13 +105,38 @@ class AppBarPage extends React.Component {
   }
 
   render() {
+    var filterOptions = [
+      { payload: '1', text: 'All Broadcasts' },
+      { payload: '2', text: 'All Voice' },
+      { payload: '3', text: 'All Text' },
+      { payload: '4', text: 'Complete Voice' },
+      { payload: '5', text: 'Complete Text' },
+      { payload: '6', text: 'Active Voice' },
+      { payload: '7', text: 'Active Text' },
+    ];
+    var iconMenuItems = [
+      { payload: '1', text: 'Download' },
+      { payload: '2', text: 'More Info' }
+    ];
+
     return (
       <ComponentDoc
         name="AppBar"
         code={this.code}
         desc={this.desc}
         componentInfo={this.componentInfo}>
-          <AppBar title='Title' iconClassNameRight="muidocs-icon-navigation-expand-more"/>
+          <AppBar>
+            <AppBarGroup key={0} float="left">
+              <DropDownMenu menuItems={filterOptions} />
+            </AppBarGroup>
+            <AppBarGroup key={1} float="right">
+              <AppBarTitle text="Options" />
+              <IconButton>
+                <FontIcon className="muidocs-icon-custom-sort" />
+              </IconButton>
+              <RaisedButton label="Create Broadcast" primary={true} />
+            </AppBarGroup>
+          </AppBar>
       </ComponentDoc>
     );
   }

docs/src/app/components/pages/components/toolbars.jsx

@@ -37,7 +37,7 @@ class ToolbarPage extends React.Component {
 
     var desc = 'Toolbars are collections of components stacked horizontally ' +
                'against each other. Toolbars provide greater versatility than ' +
-               'appBars. AppBars are a subset of toolbars. The following ' + 
+               'appBars. AppBars are a subset of toolbars. The following ' +
                'toolbar components can help organize your layout. Note that ' +
                'every component listed here (including Toolbar) have a style ' +
                'prop which overrides the inline-styles of their root element.'