From 7ee1424c1e9b4d1f8e4111e6be4193ceefc21e26 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Fri, 23 Apr 2021 15:03:00 +0200
Subject: [PATCH] feat: nav in viewers

---
 client/src/common/components/nav/NavLogo.jsx  | 49 +++++++++++++++++++
 .../common/components/nav/NavLogo.module.css  | 26 ++++++++++
 .../viewers/backstage/StageManager.jsx        |  3 ++
 .../viewers/presenter/PresenterView.jsx       |  3 ++
 4 files changed, 81 insertions(+)
 create mode 100644 client/src/common/components/nav/NavLogo.jsx
 create mode 100644 client/src/common/components/nav/NavLogo.module.css

diff --git a/client/src/common/components/nav/NavLogo.jsx b/client/src/common/components/nav/NavLogo.jsx
new file mode 100644
index 000000000..2e1f565ff
--- /dev/null
+++ b/client/src/common/components/nav/NavLogo.jsx
@@ -0,0 +1,49 @@
+import { Link } from 'react-router-dom';
+import { Image } from '@chakra-ui/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
+import navlogo from '../../../assets/images/logos/LOGO-72.png';
+import style from './NavLogo.module.css';
+
+export default function NavLogo() {
+  const [showNav, setShowNav] = useState(false);
+
+  const handleClick = () => {
+    setShowNav(!showNav);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0.5 }}
+      whileHover={{ opacity: 1 }}
+      className={style.navContainer}
+    >
+      <Image
+        alt=''
+        src={navlogo}
+        className={style.logo}
+        onClick={handleClick}
+      />
+      <AnimatePresence>
+        {showNav && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0, y: -50 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scaleY: 0, y: -50 }}
+            className={showNav ? style.nav : style.navHidden}
+          >
+            <Link to='/speaker' className={style.navItem}>
+              Speaker
+            </Link>
+            <Link to='/sm' className={style.navItem}>
+              Backstage
+            </Link>
+            <Link to='/lower' className={style.navItem}>
+              Lower Thirds
+            </Link>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}
diff --git a/client/src/common/components/nav/NavLogo.module.css b/client/src/common/components/nav/NavLogo.module.css
new file mode 100644
index 000000000..12dad4e69
--- /dev/null
+++ b/client/src/common/components/nav/NavLogo.module.css
@@ -0,0 +1,26 @@
+.navContainer {
+  position: absolute;
+  right: 2vw;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 1vw;
+  z-index: 10;
+}
+
+.logo {
+  width: 3vw;
+  opacity: 0.5;
+}
+
+.nav {
+  gap: 2vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.navItem {
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 0.5vh 1vw;
+  border-radius: 4px;
+}
diff --git a/client/src/features/viewers/backstage/StageManager.jsx b/client/src/features/viewers/backstage/StageManager.jsx
index 996df1577..3e83216a6 100644
--- a/client/src/features/viewers/backstage/StageManager.jsx
+++ b/client/src/features/viewers/backstage/StageManager.jsx
@@ -2,6 +2,7 @@ import QRCode from 'react-qr-code';
 import { formatDisplay } from '../../../common/dateConfig';
 import style from './StageManager.module.css';
 import Paginator from './Paginator';
+import NavLogo from '../../../common/components/nav/NavLogo';
 
 export default function StageManager(props) {
   const { pres, publ, lower, title, time, events, selectedId, general } = props;
@@ -15,6 +16,8 @@ export default function StageManager(props) {
 
   return (
     <div className={style.container__gray}>
+      <NavLogo />
+
       <div className={style.eventTitle}>{general.title}</div>
       <div className={style.nowContainer}>
         <div className={style.label}>Now</div>
diff --git a/client/src/features/viewers/presenter/PresenterView.jsx b/client/src/features/viewers/presenter/PresenterView.jsx
index ba8e966d0..8bcd4806c 100644
--- a/client/src/features/viewers/presenter/PresenterView.jsx
+++ b/client/src/features/viewers/presenter/PresenterView.jsx
@@ -1,5 +1,6 @@
 import Countdown from '../../../common/components/countdown/Countdown';
 import MyProgressBar from '../../../common/components/myProgressBar/MyProgressBar';
+import NavLogo from '../../../common/components/nav/NavLogo';
 import style from './PresenterView.module.css';
 
 export default function PresenterView(props) {
@@ -21,6 +22,8 @@ export default function PresenterView(props) {
         <div className={style.message}>{pres.text}</div>
       </div>
 
+      <NavLogo />
+
       <div className={style.clockContainer}>
         <div className={style.label}>Time Now</div>
         <div className={style.clock}>{time.clock}</div>