2 files changed, 15 insertions, 4 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 6cab857..3e7b000 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -106,7 +106,7 @@
 }
 
 .next-link {
-  padding-right: .25rem;
+  padding: 0.25rem 0.25rem 0.25rem 8rem;
 }
 .transcript-link {
   padding-right: 1.25rem;
@@ -128,6 +128,7 @@
   width: 12rem;
   height: 8rem;
   z-index: 2;
+  margin-top: 3rem;
   margin-bottom: 0.5rem;
   margin-right: 0.75rem;
   background-size: cover;
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index fdad211..00eab26 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -15,6 +15,7 @@ class NavParent extends Component {
   }
   constructor(props){
     super(props)
+    this.suppressHover = false
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
     this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
@@ -23,22 +24,30 @@ class NavParent extends Component {
     this.goToNextSection = this.goToNextSection.bind(this)
   }
   handleMouseEnter(){
+    // console.log('mouse enter')
     if (this.state.suppressHover) return
     this.setState({ hoveringNext: false, hoveringNav: true })
   }
   handleMouseEnterNext(){
+    // console.log('mouse enter next', this.state.suppressHover)
     if (this.state.suppressHover) return
     this.setState({ hoveringNext: true, hoveringNav: false })
   }
   handleMouseLeave(){
-    this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: false })
+    // console.log('mouse leave')
+    this.setState({ hoveringNav: false })
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.setState({ hoveringNext: false, suppressHover: false })
+    }, 100)
   }
   handleMouseLeaveNext(){
+    // console.log('mouse leave next')
     this.setState({ hoveringNext: false, suppressHover: true, })
     clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
       this.setState({ suppressHover: false })
-    }, 50)
+    }, 100)
   }
   handleNavBarClick(e) {
     e && e.stopPropagation()
@@ -85,11 +94,12 @@ class NavParent extends Component {
           </div>
           <div
             className='nav-next'
-            onMouseEnter={this.handleMouseEnterNext}
+            onMouseEnter={this.handleMouseEnter}
             onClick={this.goToNextSection}
           >
             <span
               className="next-link link"
+              onMouseEnter={this.handleMouseEnterNext}
             >
               {viewer.nextSection
                 ? "Next"