3 files changed, 91 insertions, 1 deletions
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>
+    )
+  }
+}