ui/js/component/navMain/index.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import {
-  connect,
-} from 'react-redux'
-import {
-  selectCurrentPage,
-} from 'selectors/app'
-import {
-  doNavigate,
-} from 'actions/app'
-import NavMain from './view'
-
-const select = (state) => ({
-  currentPage: selectCurrentPage(state)
-})
-
-const perform = (dispatch) => ({
-  navigate: (path) => dispatch(doNavigate(path))
-})
-
-export default connect(select, perform)(NavMain)

ui/js/component/navMain/view.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-export const NavMain = (props) => {
-  const {
-    links,
-    currentPage,
-    navigate,
-  } = props
-
-  return (
-    <nav className="sub-header">{
-      Object.keys(links).map((link) => {
-        console.log(link + " vs " + currentPage);
-        return <a href="#" onClick={() => navigate(link)} key={link} className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected' }>
-          {links[link]}
-        </a>
-      })
-    }</nav>
-  )
-}
-
-export default NavMain

ui/js/component/navSettings/index.jsx

@@ -1,7 +0,0 @@
-import React from 'react'
-import {
-  connect,
-} from 'react-redux'
-import NavSettings from './view'
-
-export default connect(null, null)(NavSettings)

ui/js/component/navSettings/view.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import NavMain from 'component/navMain'
-
-export const NavSettings = () => {
-  return <NavMain links={{
-    'settings': 'Settings',
-    'help' : 'Help'
-  }} />;
-}
-
-export default NavSettings

ui/js/component/navWallet/index.jsx

@@ -1,7 +0,0 @@
-import React from 'react'
-import {
-  connect,
-} from 'react-redux'
-import NavWallet from './view'
-
-export default connect(null, null)(NavWallet)

ui/js/component/navWallet/view.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import NavMain from 'component/navMain'
-
-export const NavWallet = () => {
-  return <NavMain links={{
-   'wallet': 'Overview',
-   'send': 'Send',
-   'receive': 'Receive',
-   'rewards': 'Rewards'
- }} />
-}
-
-export default NavWallet

ui/js/component/subHeader/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+  connect,
+} from 'react-redux'
+import {
+  selectCurrentPage,
+  selectHeaderLinks,
+} from 'selectors/app'
+import {
+  doNavigate,
+} from 'actions/app'
+import SubHeader from './view'
+
+const select = (state, props) => ({
+  currentPage: selectCurrentPage(state),
+  subLinks: selectHeaderLinks(state),
+})
+
+const perform = (dispatch) => ({
+  navigate: (path) => dispatch(doNavigate(path)),
+})
+
+export default connect(select, perform)(SubHeader)

ui/js/component/subHeader/view.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+const SubHeader = (props) => {
+  const {
+    subLinks,
+    currentPage,
+    navigate,
+    modifier,
+  } = props
+
+  const links = []
+
+  for(let link of Object.keys(subLinks)) {
+    links.push(
+      <a href="#" onClick={() => navigate(link)} key={link} className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected' }>
+        {subLinks[link]}
+      </a>
+    )
+  }
+
+  return (
+    <nav className={'sub-header' + (modifier ? ' sub-header--' + modifier : '')}>
+      {links}
+    </nav>
+  )
+}
+
+export default SubHeader

ui/js/page/help/view.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import lbry from 'lbry.js';
 import Link from 'component/link';
-import NavSettings from 'component/navSettings';
+import SubHeader from 'component/subHeader'
 import {version as uiVersion} from 'json!../../../package.json';
 
 var HelpPage = React.createClass({
@@ -50,7 +50,7 @@ var HelpPage = React.createClass({
 
     return (
       <main className="main--single-column">
-        <NavSettings />
+        <SubHeader />
         <section className="card">
           <div className="card__title-primary">
             <h3>Read the FAQ</h3>

ui/js/page/rewards.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import lbryio from 'lbryio';
 import {CreditAmount, Icon} from 'component/common.js';
-import NavWallet from 'component/navWallet';
+import SubHeader from 'component/subHeader'
 import {RewardLink} from 'component/reward-link';
 
 const RewardTile = React.createClass({
@@ -55,7 +55,7 @@ export let RewardsPage = React.createClass({
   render: function() {
     return (
       <main className="main--single-column">
-        <NavWallet />
+        <SubHeader />
         <div>
           {!this.state.userRewards
             ? (this.state.failed ? <div className="empty">Failed to load rewards.</div> : '')

ui/js/page/wallet/view.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import lbry from 'lbry.js';
 import Link from 'component/link';
 import Modal from 'component/modal';
-import NavWallet from 'component/navWallet';
+import SubHeader from 'component/subHeader'
 import {
   FormField,
   FormRow
@@ -248,7 +248,7 @@ const WalletPage = (props) => {
 
   return (
     <main className="main--single-column">
-      <NavWallet />
+      <SubHeader />
       <section className="card">
         <div className="card__title-primary">
           <h3>Balance</h3>

ui/js/selectors/app.js

@@ -198,6 +198,12 @@ export const selectHeaderLinks = createSelector(
           'downloaded': 'Downloaded',
           'published': 'Published',
         };
+      case 'settings':
+      case 'help':
+        return {
+          'settings': 'Settings',
+          'help': 'Help',
+        }
       default:
         return null;
     }