barebones sidebar + light component refactor

dist/index.html

@@ -27,6 +27,11 @@
       <script src="./js/mediaelement/mediaelement-and-player.min.js"></script>
       <script src="./js/lbry.js"></script>
       <script src="./js/component/common.js"></script>
+      <script src="./js/component/form.js"></script>
+      <script src="./js/component/link.js"></script>
+      <script src="./js/component/menu.js"></script>
+      <script src="./js/component/header.js"></script>
+      <script src="./js/component/drawer.js"></script>
       <script src="./js/component/splash.js"></script>
       <script src="./js/page/home.js"></script>
       <script src="./js/page/settings.js"></script>

js/app.js

@@ -1,7 +1,9 @@
 var App = React.createClass({
   getInitialState: function() {
     // For now, routes are in format ?page or ?page=args
-    var match, param, val, viewingPage;
+    var match, param, val, viewingPage,
+        drawerOpenRaw = sessionStorage.getItem('drawerOpen');
+
     [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
 
     if (param && ['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
@@ -10,6 +12,7 @@ var App = React.createClass({
 
     return {
       viewingPage: viewingPage ? viewingPage : 'home',
+      drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true,
       pageArgs: val,
     };
   },
@@ -44,31 +47,40 @@ var App = React.createClass({
       });
     });
   },
+  openDrawer: function() {
+    sessionStorage.setItem('drawerOpen', true);
+    this.setState({ drawerOpen: true });
+  },
+  closeDrawer: function() {
+    sessionStorage.setItem('drawerOpen', false);
+    this.setState({ drawerOpen: false });
+  },
   render: function() {
-    if (this.state.viewingPage == 'home') {
+    console.log(this.state);
-      return <HomePage />;
+    return (
-    } else if (this.state.viewingPage == 'settings') {
+      <div id="window" className={ this.state.drawerOpen ? 'drawer-open' : 'drawer-closed' }>
-      return <SettingsPage />;
+        <Drawer onCloseDrawer={this.closeDrawer} />
-    } else if (this.state.viewingPage == 'help') {
+        <div id="main-content">
-      return <HelpPage />;
+          <Header onOpenDrawer={this.openDrawer} />
-    } else if (this.state.viewingPage == 'watch') {
+          {(() => {
-      return <WatchPage name={this.state.pageArgs}/>;
+            switch(this.state.viewingPage)
-    } else if (this.state.viewingPage == 'report') {
+            {
-      return <ReportPage />;
+              case 'home': return <HomePage />;
-    } else if (this.state.viewingPage == 'files') {
+              case 'settings': return <SettingsPage />;
-      return <MyFilesPage />;
+              case 'help': return <HelpPage />;
-    } else if (this.state.viewingPage == 'start') {
+              case 'watch': return <WatchPage name={this.state.pageArgs}/>;
-      return <StartPage />;
+              case 'report': return <ReportPage />;
-    } else if (this.state.viewingPage == 'claim') {
+              case 'files': return <MyFilesPage />;
-      return <ClaimCodePage />;
+              case 'start': return <StartPage />;
-    } else if (this.state.viewingPage == 'wallet') {
+              case 'claim': return <ClaimCodePage />;
-      return <WalletPage />;
+              case 'wallet': return <WalletPage />;
-    } else if (this.state.viewingPage == 'show') {
+              case 'show':  return <DetailPage name={this.state.pageArgs}/>;
-      return <DetailPage name={this.state.pageArgs}/>;
+              case 'wallet': return <WalletPage />;
-    } else if (this.state.viewingPage == 'wallet') {
+              case 'publish': return <PublishPage />;
-      return <WalletPage />;
-    } else if (this.state.viewingPage == 'publish') {
-      return <PublishPage />;
             }
+          })()}
+        </div>
+      </div>
+    );
   }
 });

js/component/common.js

@@ -52,298 +52,6 @@ var ToolTip = React.createClass({
   }
 });
 
-var linkContainerStyle = {
-  position: 'relative',
-};
-
-var Link = React.createClass({
-  getInitialState: function() {
-    return {
-      showTooltip: false,
-    };
-  },
-  handleClick: function() {
-    if (this.props.tooltip) {
-      this.setState({
-        showTooltip: !this.state.showTooltip,
-      });
-    }
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-  },
-  handleTooltipMouseOut: function() {
-    this.setState({
-      showTooltip: false,
-    });
-  },
-  render: function() {
-    var href = this.props.href ? this.props.href : 'javascript:;',
-      icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
-      className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
-                  (this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '');
-
-
-    return (
-      <span style={linkContainerStyle}>
-        <a className={className} href={href} style={this.props.style ? this.props.style : {}}
-          title={this.props.title} onClick={this.handleClick}>
-          {this.props.icon ? icon : '' }
-          {this.props.label}
-        </a>
-        {(!this.props.tooltip ? null :
-          <ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
-            {this.props.tooltip}
-          </ToolTip>
-        )}
-      </span>
-    );
-  }
-});
-
-var ReturnLink = React.createClass({
-  render: function() {
-    return <div style={ { padding: '24px 0' } }><Link
-      href={this.props.href ? this.props.href : '/'}
-      icon="icon-chevron-left"
-      label={this.props.label ? this.props.label : 'Return'}
-    /></div>;
-  }
-});
-
-var DownloadLink = React.createClass({
-  propTypes: {
-    type: React.PropTypes.string,
-    streamName: React.PropTypes.string,
-    label: React.PropTypes.string,
-    downloadingLabel: React.PropTypes.string,
-    button: React.PropTypes.string,
-    style: React.PropTypes.object,
-    hidden: React.PropTypes.bool,
-  },
-  getDefaultProps: function() {
-    return {
-      icon: 'icon-download',
-      label: 'Download',
-      downloadingLabel: 'Downloading...',
-    }
-  },
-  getInitialState: function() {
-    return {
-      downloading: false,
-    }
-  },
-  handleClick: function() {
-    lbry.getCostEstimate(this.props.streamName, (amount) => {
-      lbry.getBalance((balance) => {
-        if (amount > balance) {
-          alert("You don't have enough LBRY credits to pay for this stream.");
-        } else {
-          this.startDownload();
-        }
-      });
-    });
-  },
-  startDownload: function() {
-    if (!this.state.downloading) { //@TODO: Continually update this.state.downloading based on actual status of file
-      this.setState({
-        downloading: true
-      });
-
-      lbry.getStream(this.props.streamName, (streamInfo) => {
-        alert('Downloading to ' + streamInfo.path);
-        console.log(streamInfo);
-      });
-    }
-  },
-  render: function() {
-    var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
-    return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
-                 disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />;
-  }
-});
-
-var WatchLink = React.createClass({
-  propTypes: {
-    type: React.PropTypes.string,
-    streamName: React.PropTypes.string,
-    label: React.PropTypes.string,
-    button: React.PropTypes.string,
-    style: React.PropTypes.object,
-    hidden: React.PropTypes.bool,
-  },
-  handleClick: function() {
-    lbry.getCostEstimate(this.props.streamName, (amount) => {
-      lbry.getBalance((balance) => {
-        if (amount > balance) {
-          alert("You don't have enough LBRY credits to pay for this stream.");
-        } else {
-          window.location = '?watch=' + this.props.streamName;
-        }
-      });
-    });
-  },
-  getDefaultProps: function() {
-    return {
-      icon: 'icon-play',
-      label: 'Watch',
-    }
-  },
-
-  render: function() {
-    return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
-                 label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />;
-  }
-});
-
-var requiredFieldWarningStyle = {
-  color: '#cc0000',
-  transition: 'opacity 400ms ease-in',
-};
-var FormField = React.createClass({
-  _type: null,
-  _element: null,
-
-  propTypes: {
-    type: React.PropTypes.string.isRequired,
-    hidden: React.PropTypes.bool,
-  },
-  getInitialState: function() {
-    return {
-      warningState: 'hidden',
-    }
-  },
-  componentWillMount: function() {
-    if (['text', 'radio', 'checkbox', 'file'].indexOf(this.props.type) != -1) {
-      this._element = 'input';
-      this._type = this.props.type;
-    } else {
-      // Non <input> field, e.g. <select>, <textarea>
-      this._element = this.props.type;
-    }
-  },
-  warnRequired: function() {
-    this.setState({
-      warningState: 'shown',
-    });
-
-    setTimeout(() => {
-      this.setState({
-        warningState: 'fading',
-      });
-      setTimeout(() => {
-        this.setState({
-          warningState: 'hidden',
-        });
-      }, 450);
-    }, 5000);
-  },
-  focus: function() {
-    this.refs.field.focus();
-  },
-  getValue: function() {
-    if (this.props.type == 'checkbox') {
-      return this.refs.field.checked;
-    } else {
-      return this.refs.field.value;
-    }
-  },
-  render: function() {
-    var warningStyle = Object.assign({}, requiredFieldWarningStyle);
-    if (this.state.warningState == 'fading') {
-      warningStyle.opacity = '0';
-    }
-
-    // Pass all unhandled props to the field element
-    var otherProps = Object.assign({}, this.props);
-    delete otherProps.type;
-    delete otherProps.hidden;
-
-    return (
-      <span className={this.props.hidden ? 'hidden' : ''}>
-        <this._element type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
-                       {...otherProps}>
-          {this.props.children}
-        </this._element>
-        <span className={this.state.warningState == 'hidden' ? 'hidden' : ''} style={warningStyle}> This field is required</span>
-      </span>
-    );
-  }
-});
-
-// Generic menu styles
-var menuStyle = {
-  border: '1px solid #aaa',
-  padding: '4px',
-  whiteSpace: 'nowrap',
-};
-
-var Menu = React.createClass({
-  handleWindowClick: function(e) {
-    if (this.props.toggleButton && ReactDOM.findDOMNode(this.props.toggleButton).contains(e.target)) {
-      // Toggle button was clicked
-      this.setState({
-        open: !this.state.open
-      });
-    } else if (this.state.open && !this.refs.div.contains(e.target)) {
-      // Menu is open and user clicked outside of it
-      this.setState({
-        open: false
-      });
-    }
-  },
-  propTypes: {
-    openButton: React.PropTypes.element,
-  },
-  getInitialState: function() {
-    return {
-      open: false,
-    };
-  },
-  componentDidMount: function() {
-    window.addEventListener('click', this.handleWindowClick, false);
-  },
-  componentWillUnmount: function() {
-    window.removeEventListener('click', this.handleWindowClick, false);
-  },
-  render: function() {
-    return (
-      <div ref='div' style={menuStyle} className={this.state.open ? '' : 'hidden'}>
-        {this.props.children}
-      </div>
-    );
-  }
-});
-
-var menuItemStyle = {
-  display: 'block',
-};
-var MenuItem = React.createClass({
-  propTypes: {
-    href: React.PropTypes.string,
-    label: React.PropTypes.string,
-    icon: React.PropTypes.string,
-    onClick: React.PropTypes.func,
-  },
-  getDefaultProps: function() {
-    return {
-      iconPosition: 'left',
-    }
-  },
-  render: function() {
-    var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
-
-    return (
-      <a style={menuItemStyle} className="button-text no-underline" onClick={this.props.onClick}
-         href={this.props.href || 'javascript:'} label={this.props.label}>
-        {this.props.iconPosition == 'left' ? icon : null}
-        {this.props.label}
-        {this.props.iconPosition == 'left' ? null : icon}
-      </a>
-    );
-  }
-});
-
 var creditAmountStyle = {
   color: '#216C2A',
   fontWeight: 'bold',
@@ -367,15 +75,3 @@ var CreditAmount = React.createClass({
     );
   }
 });
-
-var subPageLogoStyle = {
-  maxWidth: '150px',
-  display: 'block',
-  marginTop: '36px',
-};
-
-var SubPageLogo = React.createClass({
-  render: function() {
-    return <a href="/"><img src="img/lbry-dark-1600x528.png" style={subPageLogoStyle} /></a>;
-  }
-});

js/component/drawer.js

@@ -0,0 +1,31 @@
+var Drawer = React.createClass({
+  getInitialState: function() {
+    return {
+      balance: 0,
+    };
+  },
+  componentDidMount: function() {
+    lbry.getBalance(function(balance) {
+      this.setState({
+        balance: balance
+      });
+    }.bind(this));
+  },
+  render: function() {
+    var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
+    return (
+      <nav id="drawer">
+        <div id="drawer-handle">
+          <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" />
+        </div>
+        <Link href='/?home' label="Discover" icon="icon-search" />
+        <Link icon="icon-bank" href="/?wallet" label={<CreditAmount amount={this.state.balance}/>} />
+        <Link href='/?publish' label="Publish" icon="icon-upload" />
+        <Link href='/?files' label="My Files" icon='icon-cloud-download' />
+        <Link href='/?settings' label="Settings" icon='icon-gear' />
+        <Link href='/?help' label="Help" icon='icon-question-circle' />
+        {isLinux ? <Link href="/?start" label="Exit LBRY" icon="icon-close" /> : null}
+      </nav>
+    );
+  }
+});

js/component/form.js

@@ -0,0 +1,75 @@
+var requiredFieldWarningStyle = {
+  color: '#cc0000',
+  transition: 'opacity 400ms ease-in',
+};
+
+var FormField = React.createClass({
+  _type: null,
+  _element: null,
+
+  propTypes: {
+    type: React.PropTypes.string.isRequired,
+    hidden: React.PropTypes.bool,
+  },
+  getInitialState: function() {
+    return {
+      warningState: 'hidden',
+    }
+  },
+  componentWillMount: function() {
+    if (['text', 'radio', 'checkbox', 'file'].indexOf(this.props.type) != -1) {
+      this._element = 'input';
+      this._type = this.props.type;
+    } else {
+      // Non <input> field, e.g. <select>, <textarea>
+      this._element = this.props.type;
+    }
+  },
+  warnRequired: function() {
+    this.setState({
+      warningState: 'shown',
+    });
+
+    setTimeout(() => {
+      this.setState({
+        warningState: 'fading',
+      });
+      setTimeout(() => {
+        this.setState({
+          warningState: 'hidden',
+        });
+      }, 450);
+    }, 5000);
+  },
+  focus: function() {
+    this.refs.field.focus();
+  },
+  getValue: function() {
+    if (this.props.type == 'checkbox') {
+      return this.refs.field.checked;
+    } else {
+      return this.refs.field.value;
+    }
+  },
+  render: function() {
+    var warningStyle = Object.assign({}, requiredFieldWarningStyle);
+    if (this.state.warningState == 'fading') {
+      warningStyle.opacity = '0';
+    }
+
+    // Pass all unhandled props to the field element
+    var otherProps = Object.assign({}, this.props);
+    delete otherProps.type;
+    delete otherProps.hidden;
+
+    return (
+      <span className={this.props.hidden ? 'hidden' : ''}>
+        <this._element type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
+          {...otherProps}>
+          {this.props.children}
+        </this._element>
+        <span className={this.state.warningState == 'hidden' ? 'hidden' : ''} style={warningStyle}> This field is required</span>
+      </span>
+    );
+  }
+});

js/component/header.js

@@ -0,0 +1,84 @@
+var topBarStyle = {
+    'float': 'right',
+    'position': 'absolute',
+    'right': 0,
+    'top': 0
+  },
+  balanceStyle = {
+    'marginRight': '5px',
+    'position': 'relative',
+    'top': '1px',
+  },
+  menuDropdownStyle = {
+  position: 'absolute',
+  top: '26px',
+  right: '0px',
+};
+
+var TopBar = React.createClass({
+  getInitialState: function() {
+    return {
+      balance: 0,
+    };
+  },
+  componentDidMount: function() {
+    lbry.getBalance(function(balance) {
+      this.setState({
+        balance: balance
+      });
+    }.bind(this));
+  },
+  onClose: function() {
+    window.location.href = "?start";
+  },
+  render: function() {
+    var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
+    return (
+      <span className='top-bar' style={topBarStyle}>
+        <Link icon="icon-bank" href="/?wallet" label={<CreditAmount amount={this.state.balance}/>} style={balanceStyle} />
+        <Link href='/?publish' label="Publish" icon="icon-upload" button="text" />
+        <Link ref="menuButton" title="LBRY Menu" icon="icon-bars" />
+        <div style={menuDropdownStyle}>
+          <Menu toggleButton={this.refs.menuButton} >
+            <MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
+            <MenuItem href='/?settings' label="Settings" icon='icon-gear' />
+            <MenuItem href='/?help' label="Help" icon='icon-question-circle' />
+            {isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />
+              : null}
+          </Menu>
+        </div>
+      </span>
+    );
+  }
+});
+
+var subPageLogoStyle = {
+  maxWidth: '150px',
+  display: 'block',
+  marginTop: '36px',
+};
+
+var SubPageLogo = React.createClass({
+  render: function() {
+    return <a href="/"><img src="img/lbry-dark-1600x528.png" style={subPageLogoStyle} /></a>;
+  }
+});
+
+var headerStyle = {
+    padding: '12px 12px 36px',
+    position: 'relative'
+  },
+  headerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled
+    height: '48px'
+  };
+
+var Header = React.createClass({
+  render: function() {
+    return (
+      <header style={headerStyle}>
+        <Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
+        <a href="/"><img src="./img/lbry-dark-1600x528.png" style={headerImageStyle}/></a>
+      </header>
+    );
+  }
+});

js/component/link.js

@@ -0,0 +1,143 @@
+var linkContainerStyle = {
+  position: 'relative',
+};
+
+var Link = React.createClass({
+  getInitialState: function() {
+    return {
+      showTooltip: false,
+    };
+  },
+  handleClick: function() {
+    if (this.props.tooltip) {
+      this.setState({
+        showTooltip: !this.state.showTooltip,
+      });
+    }
+    if (this.props.onClick) {
+      this.props.onClick();
+    }
+  },
+  handleTooltipMouseOut: function() {
+    this.setState({
+      showTooltip: false,
+    });
+  },
+  render: function() {
+    var href = this.props.href ? this.props.href : 'javascript:;',
+      icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
+      className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
+        (this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '') + ' ' + this.props.className;
+
+
+    return (
+      <span style={linkContainerStyle}>
+        <a className={className} href={href} style={this.props.style ? this.props.style : {}}
+           title={this.props.title} onClick={this.handleClick}>
+          {this.props.icon ? icon : '' }
+          {this.props.label}
+        </a>
+        {(!this.props.tooltip ? null :
+          <ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
+            {this.props.tooltip}
+          </ToolTip>
+        )}
+      </span>
+    );
+  }
+});
+
+var ReturnLink = React.createClass({
+  render: function() {
+    return <div style={ { padding: '24px 0' } }><Link
+      href={this.props.href ? this.props.href : '/'}
+      icon="icon-chevron-left"
+      label={this.props.label ? this.props.label : 'Return'}
+    /></div>;
+  }
+});
+
+var DownloadLink = React.createClass({
+  propTypes: {
+    type: React.PropTypes.string,
+    streamName: React.PropTypes.string,
+    label: React.PropTypes.string,
+    downloadingLabel: React.PropTypes.string,
+    button: React.PropTypes.string,
+    style: React.PropTypes.object,
+    hidden: React.PropTypes.bool,
+  },
+  getDefaultProps: function() {
+    return {
+      icon: 'icon-download',
+      label: 'Download',
+      downloadingLabel: 'Downloading...',
+    }
+  },
+  getInitialState: function() {
+    return {
+      downloading: false,
+    }
+  },
+  handleClick: function() {
+    lbry.getCostEstimate(this.props.streamName, (amount) => {
+      lbry.getBalance((balance) => {
+        if (amount > balance) {
+          alert("You don't have enough LBRY credits to pay for this stream.");
+        } else {
+          this.startDownload();
+        }
+      });
+    });
+  },
+  startDownload: function() {
+    if (!this.state.downloading) { //@TODO: Continually update this.state.downloading based on actual status of file
+      this.setState({
+        downloading: true
+      });
+
+      lbry.getStream(this.props.streamName, (streamInfo) => {
+        alert('Downloading to ' + streamInfo.path);
+        console.log(streamInfo);
+      });
+    }
+  },
+  render: function() {
+    var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
+    return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
+                 disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />;
+  }
+});
+
+var WatchLink = React.createClass({
+  propTypes: {
+    type: React.PropTypes.string,
+    streamName: React.PropTypes.string,
+    label: React.PropTypes.string,
+    button: React.PropTypes.string,
+    style: React.PropTypes.object,
+    hidden: React.PropTypes.bool,
+  },
+  handleClick: function() {
+    lbry.getCostEstimate(this.props.streamName, (amount) => {
+      lbry.getBalance((balance) => {
+        if (amount > balance) {
+          alert("You don't have enough LBRY credits to pay for this stream.");
+        } else {
+          window.location = '?watch=' + this.props.streamName;
+        }
+      });
+    });
+  },
+  getDefaultProps: function() {
+    return {
+      icon: 'icon-play',
+      label: 'Watch',
+    }
+  },
+
+  render: function() {
+    return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
+                 label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />;
+  }
+});

js/component/menu.js

@@ -0,0 +1,72 @@
+// Generic menu styles
+var menuStyle = {
+  border: '1px solid #aaa',
+  padding: '4px',
+  whiteSpace: 'nowrap',
+};
+
+var Menu = React.createClass({
+  handleWindowClick: function(e) {
+    if (this.props.toggleButton && ReactDOM.findDOMNode(this.props.toggleButton).contains(e.target)) {
+      // Toggle button was clicked
+      this.setState({
+        open: !this.state.open
+      });
+    } else if (this.state.open && !this.refs.div.contains(e.target)) {
+      // Menu is open and user clicked outside of it
+      this.setState({
+        open: false
+      });
+    }
+  },
+  propTypes: {
+    openButton: React.PropTypes.element,
+  },
+  getInitialState: function() {
+    return {
+      open: false,
+    };
+  },
+  componentDidMount: function() {
+    window.addEventListener('click', this.handleWindowClick, false);
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener('click', this.handleWindowClick, false);
+  },
+  render: function() {
+    return (
+      <div ref='div' style={menuStyle} className={this.state.open ? '' : 'hidden'}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+var menuItemStyle = {
+  display: 'block',
+};
+var MenuItem = React.createClass({
+  propTypes: {
+    href: React.PropTypes.string,
+    label: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    onClick: React.PropTypes.func,
+  },
+  getDefaultProps: function() {
+    return {
+      iconPosition: 'left',
+    }
+  },
+  render: function() {
+    var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
+
+    return (
+      <a style={menuItemStyle} className="button-text no-underline" onClick={this.props.onClick}
+         href={this.props.href || 'javascript:'} label={this.props.label}>
+        {this.props.iconPosition == 'left' ? icon : null}
+        {this.props.label}
+        {this.props.iconPosition == 'left' ? null : icon}
+      </a>
+    );
+  }
+});

js/page/help.js

@@ -4,7 +4,6 @@ var HelpPage = React.createClass({
   render: function() {
     return (
       <main className="page">
-        <SubPageLogo />
         <h1>Troubleshooting</h1>
         <p>Here are the most commonly encountered problems and what to try doing about them.</p>
 

js/page/home.js

@@ -332,94 +332,6 @@ var Discover = React.createClass({
   }
 });
 
-var logoStyle = {
-    padding: '48px 12px',
-    textAlign: 'center',
-    maxHeight: '80px',
-  },
-  imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled
-    height: '80px'
-  };
-
-var Header = React.createClass({
-  render: function() {
-    return (
-      <header>
-        <TopBar />
-        <div style={logoStyle}>
-          <img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
-        </div>
-      </header>
-    );
-  }
-});
-
-var topBarStyle = {
-  'float': 'right',
-  'position': 'relative',
-  'height': '26px',
-},
-balanceStyle = {
-  'marginRight': '5px',
-  'position': 'relative',
-  'top': '1px',
-};
-
-var mainMenuStyle = {
-  position: 'absolute',
-  top: '26px',
-  right: '0px',
-};
-
-var MainMenu = React.createClass({
-  render: function() {
-    var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
-
-    return (
-      <div style={mainMenuStyle}>
-        <Menu {...this.props}>
-          <MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
-          <MenuItem href='/?wallet' label="My Wallet" icon='icon-bank' />
-          <MenuItem href='/?publish' label="Publish" icon='icon-upload' />
-          <MenuItem href='/?settings' label="Settings" icon='icon-gear' />
-          <MenuItem href='/?help' label="Help" icon='icon-question-circle' />
-          {isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />
-                   : null}
-        </Menu>
-      </div>
-    );
-  }
-});
-
-var TopBar = React.createClass({
-  getInitialState: function() {
-    return {
-      balance: 0,
-    };
-  },
-  componentDidMount: function() {
-    lbry.getBalance(function(balance) {
-      this.setState({
-        balance: balance
-      });
-    }.bind(this));
-  },
-  onClose: function() {
-    window.location.href = "?start";
-  },
-  render: function() {
-    return (
-      <span className='top-bar' style={topBarStyle}>
-        <span style={balanceStyle}>
-          <CreditAmount amount={this.state.balance}/>
-        </span>
-        <Link ref="menuButton" title="LBRY Menu" icon="icon-bars" />
-        <MainMenu toggleButton={this.refs.menuButton} />
-      </span>
-    );
-  }
-});
-
 var HomePage = React.createClass({
   componentDidMount: function() {
     lbry.getStartNotice(function(notice) {
@@ -430,10 +342,7 @@ var HomePage = React.createClass({
   },
   render: function() {
     return (
-      <div className="page">
-        <Header />
       <Discover />
-      </div>
     );
   }
 });

js/page/my_files.js

@@ -185,7 +185,6 @@ var MyFilesPage = React.createClass({
     }
     return (
       <main className="page">
-        <SubPageLogo />
         <h1>My Files</h1>
         <section>
           {content}

js/page/publish.js

@@ -261,7 +261,6 @@ var PublishPage = React.createClass({
   render: function() {
     return (
       <main className="page" ref="page">
-        <SubPageLogo />
         <h1>Publish Content</h1>
         <section className="section-block">
           <h4>LBRY Name</h4>

js/page/report.js

@@ -21,7 +21,6 @@ var ReportPage = React.createClass({
   render: function() {
     return (
       <main className="page">
-        <SubPageLogo />
         <h1>Report an Issue</h1>
         <section>
         <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>

js/page/settings.js

@@ -74,7 +74,6 @@ var SettingsPage = React.createClass({
 
     return (
       <main className="page">
-        <SubPageLogo />
         <h1>Settings</h1>
         <section>
           <h4>Run on startup</h4>

js/page/show.js

@@ -141,7 +141,6 @@ var DetailPage = React.createClass({
 
     return (
       <main className="page">
-        <SubPageLogo />
         <FormatsSection name={name} claimInfo={claimInfo} amount={amount} />
         <section>
           <ReturnLink />

js/page/start.js

@@ -5,7 +5,6 @@ var StartPage = React.createClass({
   render: function() {
     return (
       <main className="page">
-        <SubPageLogo />
         <h1>LBRY has closed</h1>
         <Link href="lbry://lbry" label="Click here to start LBRY" />
       </main>

js/page/wallet.js

@@ -101,7 +101,6 @@ var WalletPage = React.createClass({
   render: function() {
     return (
       <main className="page">
-        <SubPageLogo />
         <NewAddressSection />
         <SendToAddressSection />
         <section>

js/page/watch.js

@@ -38,7 +38,7 @@ var WatchPage = React.createClass({
   },
   render: function() {
     return (
-      <main className="page full-screen">
+      <main className="full-screen">
       <div className={this.state.readyToPlay ? 'hidden' : ''}>
         <h3>Loading lbry://{this.props.name}</h3>
         {this.state.loadStatusMessage}...

scss/_canvas.scss

@@ -0,0 +1,54 @@
+@import "global";
+
+html
+{
+  height: 100%;
+  font-size: $font-size;
+}
+body
+{
+  font-family: 'Source Sans Pro', sans-serif;
+  line-height: 1.3333;
+  min-height: 100%;
+  position: relative;
+}
+
+#window
+{
+  position: relative;
+}
+
+#drawer
+{
+  width: 240px;
+  position: absolute;
+  min-height: 100vh;
+  left: 0;
+  top: 0;
+  .button-text
+  {
+    display: block;
+  }
+}
+
+#window.drawer-closed
+{
+  #drawer { display: none }
+}
+#window.drawer-open
+{
+  #main-content { margin-left: 240px; }
+  .open-drawer-link { display: none; }
+}
+
+.page {
+  margin-left: auto;
+  margin-right: auto;
+  width: 800px;
+  padding-bottom: $spacing-vertical*3;
+}
+.full-screen
+{
+  width: 100%;
+  height: 100%;
+}

scss/_gui.scss

@@ -1,30 +1,5 @@
 @import "global";
 
-html
-{
-    height: 100%;
-    font-size: $font-size;
-}
-body
-{
-    font-family: 'Source Sans Pro', sans-serif;
-    line-height: 1.3333;
-    min-height: 100%;
-    position: relative;
-}
-
-.page {
-  margin-left: auto;
-  margin-right: auto;
-  width: 800px;
-  padding-bottom: $spacing-vertical*3;
-
-  &.full-screen {
-    width: 100%;
-    height: 100%;
-  }
-}
-
 .icon-fixed-width {
   /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */
   width: (18em / 14);

scss/all.scss

@@ -2,4 +2,5 @@
 @import "_grid";
 @import "_icons";
 @import "_mediaelement";
+@import "_canvas";
 @import "_gui";