Luxumbra hifi nav (#167)

* Reinstating the navbar ready for the DAO meetup

* Tweaked mobile and added glow on crystal hover

* removed flicker and adjusted room bounds.

* Renamed TheRoom to MetaMansion

* did a couple of tweaks after feedback from @peth-yursick.
* MG crystal icon now opens new tab when in the Mansion.

* Sorted the alignment issue

* Small tweak to balance things

src/css/custom.scss

@@ -36,6 +36,10 @@ body {
   @media (min-width: 995px) {
     font-size: 17px;
   }
+
+  div {
+    // outline: 1px solid red;
+  }
 }
 
 body,
@@ -53,8 +57,8 @@ body,
     margin-top: -40px;
     padding-top: 40px;
     @media screen and (min-width: 768px) {
-      margin-top: -70px;
-      padding-top: 70px;
+      margin-top: -60px;
+      padding-top: 60px;
     }
   }
 }
@@ -276,6 +280,7 @@ body,
         margin-left: auto;
         margin-right: 0;
         max-width: unset;
+        padding-left: 7px;
       }
       .row {
         display: flex;
@@ -355,7 +360,7 @@ body,
   background-color: var(--mf-color-secondary);
 }
 .navbar {
-  background: rgba(var(--mf-color-secondary-rgb), 0.8);
+  background: #2a0c42;
   backdrop-filter: blur(5px);
   border: 0;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
@@ -365,8 +370,8 @@ body,
   text-align: center;
 
   @media screen and (min-width: 768px) {
-    height: 70px;
-    max-height: 70px;
+    height: 60px;
+    max-height: 60px;
   }
   &__title {
     position: absolute;
@@ -388,7 +393,7 @@ body,
     transition: filter 0.2s ease-in;
 
     &:hover {
-      filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
+      filter: drop-shadow(0 0 15px #a5b9f680);
     }
 
     @media screen and (min-width: 768px) {

src/pages/metaMansion.module.scss

@@ -5,9 +5,8 @@
  */
 
 .theRoom {
-  height: calc(100vh - 75px);
-  max-height: calc(100vh - 75px);
-  overflow: hidden;
+  height: calc(100vh);
+  max-height: calc(100vh - 60px);
   width: 100%;
   border-width: 0;
 }

src/pages/metamansion.js

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import styles from './metaMansion.module.scss';
+import Layout from '@theme/Layout';
+
+function TheRoom() {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const path =
+        window.location.pathname === '/metamansion' ? 'mansion' : null;
+      const homeLink = document.querySelector('.navbar__brand');
+      homeLink.addEventListener(
+        'click',
+        function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+          path === 'mansion' && window.open('/', '_blank');
+          console.log('e');
+        },
+        false,
+      );
+    }
+    return () => {
+      homeLink.removeEventListener('click', e, false);
+    };
+  }, []);
+
+  return (
+    <Layout title='The Room' description='A 3D Audio Virtual Meeting Space'>
+      <iframe
+        className={styles.theRoom}
+        allow='microphone'
+        src='https://map.highfidelity.com/yC943b9F2bPxjq0U/?map=https%3A%2F%2Fcdn.discordapp.com%2Fattachments%2F747895452921233468%2F747926639777677382%2FSpeakeasy-BG-default-70m.png'
+      />
+    </Layout>
+  );
+}
+
+export default TheRoom;

src/pages/theroom.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import styles from './theRoom.module.scss';
-import Layout from '@theme/Layout';
-
-function TheRoom() {
-  return (
-    <Layout title='The Room' description='A 3D Audio Virtual Meeting Space'>
-      <iframe
-        className={styles.theRoom}
-        allow='microphone'
-        src='https://map.highfidelity.com/yC943b9F2bPxjq0U/?map=https%3A%2F%2Fcdn.discordapp.com%2Fattachments%2F747895452921233468%2F747926639777677382%2FSpeakeasy-BG-default-70m.png'
-      />
-    </Layout>
-  );
-}
-
-export default TheRoom;