refactor viewer sections list, share, subscribe, subscription form

1 files changed, 26 insertions, 8 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
index 5a2971b..56046c3 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 import { Arrow } from '../nav/viewer.icons'
+import ViewerSectionsShare from './viewer.sections.share'
+import ViewerSectionsSubscribe from './viewer.sections.subscribe'
 
 class ViewerSectionsNav extends Component {
   render() {
@@ -12,21 +14,37 @@ class ViewerSectionsNav extends Component {
       <div className="viewer-nav sections-nav">
         <div className='nav-row'>
           <div>
-            <span className="share-link link" onClick={() => actions.viewer.toggleComponent('share')}>
-              <Arrow type={viewer.checklist ? 'down' : 'up'} />
-              {'Share'}
-            </span>
+            <div className="share-link link">
+              <ViewerSectionsShare />
+              <span onClick={() => actions.viewer.toggleComponent('share')}>
+                <Arrow type={'up'} />
+                {'Share'}
+              </span>
+            </div>
+            <div className="subscribe-link link">
+              <ViewerSectionsSubscribe />
+              <span onClick={() => actions.viewer.toggleComponent('subscribe')}>
+                <Arrow type={viewer.subscribe ? 'down' : 'up'} />
+                {'Subscribe'}
+              </span>
+            </div>
           </div>
           <div>
-            <span className="checklist-link link" onClick={() => actions.viewer.toggleComponent('checklist')}>
+            <div className="checklist-link link" onClick={() => actions.viewer.toggleComponent('checklist')}>
               <Arrow type={viewer.checklist ? 'down': 'up'} />
               {'Checklist'}
-            </span>
+            </div>
           </div>
           <div>
-            <span className="transcript-link link" onClick={() => actions.viewer.openTranscript()}>
+            <div className="footnotes-link link">
+              <span onClick={() => actions.viewer.toggleComponent('footnotes')}>
+                <Arrow type={viewer.footnotes ? 'down' : 'up'} />
+                {'Footnotes'}
+              </span>
+            </div>
+            <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}>
               {'Transcript'}
-            </span>
+            </div>
           </div>
         </div>
       </div>