home link

3 files changed, 58 insertions, 3 deletions

diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js
index 4797864..e8d1524 100644
--- a/frontend/site/projects/museum/constants.js
+++ b/frontend/site/projects/museum/constants.js
@@ -390,4 +390,9 @@ export const HEADPHONES = {
     en: "(HTRF spatialization)",
     de: "(HTRF Verräumlichung)"
   }
-}
\ No newline at end of file
+}
+
+export const BACK_TO_KW = {
+  en: "back to KW",
+  de: "zu KW",
+}
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index c4d6f8e..424c193 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -125,3 +125,35 @@
 .footer.with-artist:hover .footer-gradient {
   transform: translateY(0);
 }
+
+
+/* close button */
+
+.site-close {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none;
+  color: #fff;
+}
+.site-close span {
+  font-family: "Helvetica", sans-serif;
+  font-size: 20px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.site-close:hover span {
+  opacity: 1;
+}
+.site-close.close-orange {
+  color: #FF790D;
+}
+.site-close img {
+  width: 32px;
+  margin-left: 1.5rem;
+}
\ 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
index 804837d..2fd6eff 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -10,7 +10,7 @@ import JakrawalLinks from './jakrawal.links'
 import TitlesOverlay from './titles.overlay'
 import Flash from './flash'
 import Marquee from './marquee'
-import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET } from "site/projects/museum/constants"
+import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET, BACK_TO_KW } from "site/projects/museum/constants"
 import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
 import MuteButton from "site/audio/mute.button"
 import { history } from "site/store"
@@ -26,6 +26,8 @@ class NavOverlay extends Component {
     showCounter: false,
     showMuteButton: false,
     isProjectPage: false,
+    showClose: false,
+    orangeClose: false,
     artist: {},
   }
 
@@ -65,6 +67,8 @@ class NavOverlay extends Component {
         currentArtist: null,
         showMuteButton: false,
         isProjectPage: false,
+        showClose: true,
+        orangeClose: false,
         artist: {},
       })
     }
@@ -78,6 +82,8 @@ class NavOverlay extends Component {
         currentArtist: null,
         showMuteButton: true,
         isProjectPage: false,
+        showClose: true,
+        orangeClose: true,
         artist: {},
       })
     }
@@ -90,6 +96,8 @@ class NavOverlay extends Component {
         showCounter: false,
         showMuteButton: false,
         isProjectPage: true,
+        showClose: false,
+        orangeClose: false,
       })
     }
     else if (pathkey in ARTISTS) {
@@ -101,6 +109,8 @@ class NavOverlay extends Component {
         showArtist: true,
         showMuteButton: true,
         isProjectPage: false,
+        showClose: false,
+        orangeClose: false,
         showCounter: pathkey === 'nilthamrong' && path_chapter !== "home",
         currentArtist: pathkey,
         artist: ARTISTS[pathkey],
@@ -114,6 +124,8 @@ class NavOverlay extends Component {
         showArtist: false,
         showMuteButton: false,
         isProjectPage: false,
+        showClose: false,
+        orangeClose: false,
         currentArtist: null,
         artist: {},
       })
@@ -159,7 +171,7 @@ class NavOverlay extends Component {
 
   render() {
     const { language } = this.props
-    const { showArtist, showHome, showLanguage, showMuteButton, showCounter, showFooter, isProjectPage, artist } = this.state
+    const { showArtist, showHome, showLanguage, showMuteButton, showCounter, showFooter, showClose, orangeClose, isProjectPage, artist } = this.state
     return (
       <div className="museum-nav">
         <JakrawalLinks location={this.props.location} match={this.props.match} />
@@ -201,6 +213,12 @@ class NavOverlay extends Component {
             <MuteButton />
           )}
         </div>
+        {showClose && (
+          <a href={`https://www.kw-berlin.de/${language}/`} className={orangeClose ? "close-orange site-close" : "site-close"}>
+            <span>{BACK_TO_KW[language]}</span>
+            <img src={orangeClose ? "/last-museum/static/img/close-orange.png" : "/last-museum/static/img/close.png"} />
+          </a>
+        )}
         <Flash location={this.props.location} match={this.props.match} />
       </div>
     )