From 353334c69f52a49c92618bb673dd11c506c383cd Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 1 Apr 2021 22:25:58 +0200
Subject: adding nav overlay

---
 frontend/site/projects/museum/views/nav.overlay.js | 74 ++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 frontend/site/projects/museum/views/nav.overlay.js

(limited to 'frontend/site/projects/museum/views/nav.overlay.js')

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>
+    )
+  }
+}
-- 
cgit v1.2.3-70-g09d2