adding nav overlay

6 files changed, 133 insertions, 1 deletions

diff --git a/frontend/site/projects/museum/app.js b/frontend/site/projects/museum/app.js
index 4c51590..12dab41 100644
--- a/frontend/site/projects/museum/app.js
+++ b/frontend/site/projects/museum/app.js
@@ -4,6 +4,7 @@ import { Route } from 'react-router'
 
 import ViewerContainer from 'site/viewer/viewer.container'
 import Home from './views/home'
+import NavOverlay from './views/nav.overlay'
 import actions from 'site/actions'
 
 export default class App extends Component {
@@ -19,6 +20,7 @@ export default class App extends Component {
         <div className='app'>
           <Route path={'/last-museum/:page_name'} component={ViewerContainer} exact />
           <Route path={'/last-museum/start'} component={Home} exact />
+          <Route path={'/last-museum/:page_name'} component={NavOverlay} exact />
           <Route exact key='root' path='/last-museum/' render={() => {
             setTimeout(() => this.props.history.push('/last-museum/start'), 10)
             return null
diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js
new file mode 100644
index 0000000..0bb98ba
--- /dev/null
+++ b/frontend/site/projects/museum/constants.js
@@ -0,0 +1,27 @@
+export const ARTISTS = {
+  nora: {
+    name: "Nora Al-Badri",
+    location: "C-Base, Berlin, Germany",
+  },
+  leite: {
+    name: "Juliana Cerqueria Leite",
+    location: "Santa Ifigênia, São Paolo, Brazil",
+  },
+  foreshew: {
+    name: "Nicole Foreshew",
+    location: "Australia",
+  },
+  stankievich: {
+    name: "Charles Stankievich",
+    location: "Canada",
+  },
+  nilthamrong: {
+    name: "Jakrawal Nilthamrong",
+    location: "Thailand",
+  },
+  opoko: {
+    name: "Zohra Opoko",
+    location: "Mortuary (Unfinished), Accra, Ghana",
+  }
+}
+
diff --git a/frontend/site/projects/museum/icons.js b/frontend/site/projects/museum/icons.js
new file mode 100644
index 0000000..c4bdd68
--- /dev/null
+++ b/frontend/site/projects/museum/icons.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const ArrowLeft = (
+  <svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 6L7 13.9931L19 22" stroke="#0F0F0F" strokeWidth="2" strokeMiterlimit="10"/>
+  </svg>
+)
+
+export const ArrowRight = (
+  <svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 22L18 14.0069L6 6" stroke="#0F0F0F" strokeWidth="2" strokeMiterlimit="10"/>
+  </svg>
+)
diff --git a/frontend/site/projects/museum/views/home.css b/frontend/site/projects/museum/views/home.css
index 7cfa5a0..597c66b 100644
--- a/frontend/site/projects/museum/views/home.css
+++ b/frontend/site/projects/museum/views/home.css
@@ -1,6 +1,9 @@
+html {
+  background: #111111;
+}
 .app > div.home {
   display: block;
-  background: black;
+  background: #111111;
   transition: opacity 0.4s;
   opacity: 1.0;
   cursor: pointer;
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
new file mode 100644
index 0000000..2b6d75a
--- /dev/null
+++ b/frontend/site/projects/museum/views/nav.css
@@ -0,0 +1,13 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(90deg, rgba(255, 121, 13, 0.0), rgba(255, 121, 13, 1.0));
+}
+.footer .artist-name {
+  font-family: "Druk Wide";
+  font-style: italic;
+}
+.footer .artist-location {
+  font-family: "Helvetica", sans-serif;
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
new file mode 100644
index 0000000..36af7db
--- /dev/null
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+
+import actions from 'site/actions'
+
+import "./nav.css"
+
+import { ARTISTS } from "site/projects/museum/constants"
+
+export default class NavOverlay extends Component {
+  state = {
+    showHome: false,
+    showFooter: false,
+    showArtist: false,
+    artist: {},
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+  componentDidUpdate() {
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { pathname } = this.props.location
+    const pathPartz = pathname.split("-")
+    const pathkey = pathPartz[0]
+    if (pathkey === 'start') {
+      this.setState({
+        showFooter: true,
+        showArtist: false,
+        artist: {}
+      })
+    } else if (pathkey in ARTISTS) {
+      this.setState({
+        showFooter: true,
+        showArtist: true,
+        artist: ARTISTS[pathkey]
+      })
+    } else {
+      this.setState({
+        showFooter: false,
+        showArtist: false,
+        artist: {}
+      })
+    }
+  }
+
+  render() {
+    const { showArtist, showHome, artist } = this.state
+    return (
+      <div className="museum-nav">
+        {showFooter && (
+          showArtist ? (
+            <div className="footer">
+              <span className="arrow-left">{ArrowLeft}</span>
+              <span className="artist-name">{artist.name}</span>
+              <span className="artist-location">{artist.location}</span>
+              <span className="arrow-right">{ArrowRight}</span>
+            </div>
+          } : (
+            <div className="footer" />
+          )
+        ))}
+      </div>
+    )
+  }
+}