3 files changed, 26 insertions, 8 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 3689593..5c62b03 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -5,6 +5,15 @@
   width: 100%;
   font-size: 18px;
 }
+.main-nav {
+  transition: all 0.2s;
+  transform: translateZ(0) translateY(0);
+}
+.sections-open .main-nav {
+  transform: translateZ(0) translateY(-22rem);
+  background: black;
+  color: white;
+}
 
 /* The main nav row */
 
@@ -65,6 +74,14 @@
   width: 100%;
   height: 100%;
 }
+.viewer-nav .arrow path,
+.viewer-nav .arrow polygon {
+  fill: #000;
+}
+.sections-open .viewer-nav .arrow path,
+.sections-open .viewer-nav .arrow polygon {
+  fill: #fff;
+}
 
 /* Volume button */
 
@@ -81,10 +98,10 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.nav-open .volume path {
+.sections-open .volume path {
   fill: #fff;
 }
-.nav-open .volume.muted path {
+.sections-open .volume.muted path {
   fill: #000;
   stroke: #fff;
 }
@@ -100,8 +117,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.nav-open .playToggle path,
-.nav-open .playToggle polygon {
+.sections-open .playToggle path,
+.sections-open .playToggle polygon {
   fill: #fff;
 }
 
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
index ab268a4..24fde46 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
@@ -11,13 +11,13 @@ class ViewerNav extends Component {
   }
   
   render() {
-    const { } = this.props
+    const { viewer } = this.props
     return (
       <div className="viewer-nav">
         <div className='nav-row main-nav'>
           <div>
-            <span className="section-link link" onClick={() => actions.viewer.showSection('sections')}>
-              <Arrow type={'up'} />
+            <span className="section-link link" onClick={() => actions.viewer.showSection('sectionsNav')}>
+              <Arrow type={viewer.sectionsNav ? 'down' : 'up'} />
               {ROMAN_NUMERALS[0]}
               {'. '}
               {'Introduction'}
@@ -41,6 +41,7 @@ class ViewerNav extends Component {
 }
 
 const mapStateToProps = state => ({
+  viewer: state.viewer,
 })
 
 export default connect(mapStateToProps)(ViewerNav)
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
index 93305cc..b4aeb2e 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js
@@ -15,7 +15,7 @@ class ViewerRouter extends Component {
         actions.viewer.showSection('transcript')
         break
       case 'sections':
-        actions.viewer.showSection('sections')
+        actions.viewer.showSection('sectionsNav')
         break
       case 'checklist':
         actions.viewer.showSection('checklist')