rethink narrative adjust placement; add close

src/components/presentational/NarrativeAdjust.js

@@ -9,7 +9,7 @@ export default ({ isDisabled, direction, onClickHandler }) => {
       <i
         className={`material-icons ${isDisabled ? 'disabled' : ''}`}
       >
-        chevron_{direction}
+        {`chevron_${direction}`}
       </i>
     </div>
   )

src/components/presentational/NarrativeClose.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default ({ onClickHandler, closeMsg }) => {
+  return (
+    <div
+      className='narrative-close'
+      onClick={onClickHandler}
+    >
+      <button
+        className='side-menu-burg is-active'
+      >
+        <span></span>
+      </button>
+      <div className='close-text'>{closeMsg}</div>
+    </div>
+  )
+}

src/components/presentational/NarrativeControls.js

@@ -1,36 +1,9 @@
 import React from 'react'
 import NarrativeCard from './NarrativeCard'
 import NarrativeAdjust from './NarrativeAdjust'
+import NarrativeClose from './NarrativeClose'
 
 export default ({ narrative, methods }) => {
-  // function renderClose() {
-  //   return (
-  //     <button
-  //       className='side-menu-burg is-active'
-  //       onClick={() => { onSelectNarrative(null) }}
-  //     >
-  //       <span></span>
-  //     </button>
-  //   )
-  // }
-
-  // function _renderActions(current, steps) {
-  //   const prevExists = current !== 0
-  //   const nextExists = current < steps.length - 1
-  //   return (
-  //     <div className='actions'>
-  //       <div
-  //         className={`${prevExists ? '' : 'disabled'} action`}
-  //         onClick={prevExists ? onPrev : null}>&larr;
-  //       </div>
-  //       <div
-  //         className={`${nextExists ? '' : 'disabled'} action`}
-  //         onClick={nextExists ? onNext : null}>&rarr;
-  //       </div>
-  //     </div>
-  //   )
-  // }
-
   if (!narrative) return null
 
   const { current, steps } = narrative
@@ -50,6 +23,10 @@ export default ({ narrative, methods }) => {
         direction='right'
         onClickHandler={methods.onNext}
       />
+      <NarrativeClose
+        onClickHandler={() => methods.onSelectNarrative(null)}
+        closeMsg='-- exit from narrative --'
+      />
     </React.Fragment>
   )
 }