arrows and tmp volume icon

1 files changed, 19 insertions, 1 deletions

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 7b5a4c7..4200b03 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
@@ -3,6 +3,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { Arrow, VolumeControl, PlayButton, PlayerTime } from './viewer.icons'
 
 class ViewerNav extends Component {
   componentDidMount() {
@@ -12,7 +14,23 @@ class ViewerNav extends Component {
     const { } = this.props
     return (
       <div className="viewer-nav">
-        Viewer nav
+        <div className='nav-row main-nav'>
+          <div>
+            <Arrow type={'up'} />
+            {ROMAN_NUMERALS[0]}
+            {'. '}
+            {'Introduction'}
+          </div>
+          <div>
+            <PlayButton />
+            <PlayerTime />
+            <VolumeControl />
+          </div>
+          <div>
+            Next
+            <Arrow type={'right'} />
+          </div>
+        </div>
       </div>
     )
   }