From 2f8e5873f47c6716c05d64e30f8e95bac538f8b9 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Sun, 27 Mar 2016 01:50:27 -0400
Subject: [PATCH] Break out menu into its own component

---
 js/gui.js | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/js/gui.js b/js/gui.js
index 067af2e21..0750dbe00 100644
--- a/js/gui.js
+++ b/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 {
@@ -143,17 +135,33 @@ var TopBar = React.createClass({
   render: function() {
     return (
       <span className='top-bar' style={topBarStyle}>
-      <span style={balanceStyle}>
-        <CreditAmount amount={this.state.balance}/>
+        <span style={balanceStyle}>
+          <CreditAmount amount={this.state.balance}/>
+        </span>
+        <Menu />
       </span>
-      <span className='menu' style={menuStyle}>
-        <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