feat: nav in viewers

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>
+  );
+}

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;
+}

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>

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>