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