Break out menu into its own component

js/gui.js

@@ -118,14 +118,6 @@ var topBarStyle = {
   'float': 'right'
 };
 
-var menuStyle = {
-  position: 'relative',
-  top: '3px',
-  marginLeft: '2px'
-}, menuItemStyle = {
-  marginLeft: '3px'
-};
-
 var TopBar = React.createClass({
   getInitialState: function() {
     return {
@@ -146,14 +138,30 @@ var TopBar = React.createClass({
         <span style={balanceStyle}>
           <CreditAmount amount={this.state.balance}/>
         </span>
-      <span className='menu' style={menuStyle}>
+        <Menu />
-        <Link href='#' icon="icon-gear" fadeIn={true} style={menuItemStyle} />
-      </span>
       </span>
     );
   }
 });
 
+var menuStyle = {
+  position: 'relative',
+  top: '3px',
+  marginLeft: '2px'
+}, menuItemStyle = {
+  marginLeft: '3px'
+};
+
+
+var Menu = React.createClass({
+  render: function() {
+    return (
+      <span className='menu' style={menuStyle}>
+        <Link href='#' icon="icon-gear" fadeIn={true} style={menuItemStyle} />
+      </span>
+    )
+  }
+});
 
 
 //component/discover.js