2 files changed, 14 insertions, 8 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index e107d3f..a94b712 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -16,6 +16,11 @@
 .nav-open .viewer-sections {
   transform: translateZ(0) translateY(0);
 }
+.checklist-open .viewer-sections {
+  transform: translateZ(0) translateY(calc(3rem - 100vh));
+  z-index: 20;
+}
+
 .viewer-sections .viewer-section {
   display: inline-flex;
   white-space: normal;
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 a619d81..439b905 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
@@ -6,13 +6,10 @@ import actions from 'app/actions'
 import { Arrow } from '../nav/viewer.icons'
 
 class ViewerSectionsNav extends Component {
-  componentDidMount() {
-  }
-  
   render() {
-    const { } = this.props
+    const { viewer } = this.props
     return (
-      <div className="viewer-nav">
+      <div className="viewer-nav sections-nav">
         <div className='nav-row'>
           <div>
             <span className="share-link link">
@@ -21,13 +18,16 @@ class ViewerSectionsNav extends Component {
             </span>
           </div>
           <div>
-            <span className="checklist-link link">
-              <Arrow type={'up'} />
+            <span className="checklist-link link" onClick={() => actions.viewer.toggleSection('checklist')}>
+              <Arrow type={viewer.checklist ? 'down': 'up'} />
               {'Checklist'}
             </span>
           </div>
           <div>
-            <span className="transcript-link link" onClick={() => actions.viewer.showSection('transcript')}>
+            <span className="transcript-link link" onClick={() => {
+              actions.viewer.hideSection('checklist')
+              actions.viewer.toggleSection('transcript')
+            }}>
               {'Transcript'}
             </span>
           </div>
@@ -38,6 +38,7 @@ class ViewerSectionsNav extends Component {
 }
 
 const mapStateToProps = state => ({
+  viewer: state.viewer,
 })
 
 export default connect(mapStateToProps)(ViewerSectionsNav)