feat: nav in viewers

2026-08-17 21:24:11 +00:00 · 2021-04-23 15:03:00 +02:00
parent f3ce5681c1
commit 7ee1424c1e
4 changed files with 81 additions and 0 deletions
@@ -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>
+  );
+}