[AppBar] Add an example of a clickable title

Author: oliviertassinari

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

@@ -11,6 +11,12 @@ const IconMenu = require('menus/icon-menu');
 const MenuItem = require('menus/menu-item');
 const MoreVertIcon = require('svg-icons/navigation/more-vert');
 
+const styles = {
+  title: {
+    cursor: 'pointer',
+  },
+};
+
 export default class AppBarPage extends React.Component {
 
   constructor(props) {
@@ -136,7 +142,7 @@ export default class AppBarPage extends React.Component {
             iconClassNameRight="muidocs-icon-navigation-expand-more" />
           <br />
           <AppBar
-            title="Title"
+            title={<span style={styles.title} onTouchTap={this._onTouchTap}>Title</span>}
             iconElementLeft={<IconButton><NavigationClose /></IconButton>}
             iconElementRight={<FlatButton label="Save" />} />
           <br />
@@ -157,4 +163,8 @@ export default class AppBarPage extends React.Component {
     );
   }
 
+  _onTouchTap() {
+    alert('onTouchTap triggered on the title component');
+  }
+
 }

docs/src/app/components/raw-code/app-bar-code.txt

@@ -3,7 +3,7 @@
   iconClassNameRight="muidocs-icon-navigation-expand-more" />
 
 <AppBar
-  title="Title"
+  title={<span>Title</span>}
   iconElementLeft={<IconButton><NavigationClose /></IconButton>}
   iconElementRight={<FlatButton label="Save" />} />
 

src/app-bar.jsx

@@ -164,7 +164,7 @@ const AppBar = React.createClass({
       // If not, just use it as a node.
       titleElement = typeof title === 'string' || title instanceof String ?
         <h1 onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement)}>{title}</h1> :
-        <div onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.mainElement)}>{title}</div>;
+        <div onTouchTap={this._onTitleTouchTap} style={this.prepareStyles(styles.title, styles.mainElement)}>{title}</div>;
     }
 
     if (showMenuIconButton) {