alt cursor on nav bar

3 files changed, 13 insertions, 6 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 01cc8ec..4a1b8e7 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -25,7 +25,7 @@
   transition: all 0.2s;
   transform: translateZ(0) translateY(0);
   border-top: 1px solid transparent;
-  cursor: pointer;
+  cursor: crosshair;
 }
 .viewer-nav.hovering-nav .main-nav {
   background: black;
@@ -98,16 +98,23 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.viewer-nav .link.section-link {
+  cursor: crosshair;
+}
 .viewer-nav .link.section-link > span {
   align-items: flex-start;
   justify-content: flex-start;
   max-width: 90%;
   white-space: pre;
   display: block;
+  pointer-events: none;
+}
+.viewer-nav .link.section-link .arrow {
+  cursor: pointer;
 }
 
 .next-link {
-  padding: 0.25rem 0.25rem 0.25rem 8rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
   user-select: none;
 }
 .transcript-link {
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 6fc4b07..321d54f 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -92,8 +92,8 @@ class NavParent extends Component {
       <div ref={this.navbarRef} className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
         <div className={navClassName} onClick={this.handleNavBarClick}>
           <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
-            <span className="section-link link" onClick={this.handleSectionLinkClick}>
-              <Arrow type={viewer.nav ? 'down' : 'up'} />
+            <span className="section-link link">
+              <Arrow type={viewer.nav ? 'down' : 'up'} onClick={this.handleSectionLinkClick} />
               {currentSection && (
                 viewer.mediaTitle
                 ? <span><i>{viewer.mediaTitle}</i></span>
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index c8eb68e..5ff5650 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -29,8 +29,8 @@ const arrows = {
   ),
 }
 
-export const Arrow = React.memo(({ type }) => (
-  <div className={'arrow ' + type}>
+export const Arrow = React.memo(({ type, onClick }) => (
+  <div className={'arrow ' + type} onClick={onClick}>
     {arrows[type]}
   </div>
 ))