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 ( + + + + {showNav && ( + + + Speaker + + + Backstage + + + Lower Thirds + + + )} + + + ); +} 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 (
+ +
{general.title}
Now
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) {
{pres.text}
+ +
Time Now
{time.clock}