Feat/studio clock (#60)

client/src/common/components/nav/NavLogo.jsx

@@ -1,11 +1,13 @@
+import PropTypes from "prop-types";
 import { Link, Redirect } from 'react-router-dom';
 import { Image } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useState, useEffect, useCallback } from 'react';
 import navlogo from 'assets/images/logos/LOGO-72.png';
-import style from './NavLogo.module.css';
+import style from './NavLogo.module.scss';
 
-export default function NavLogo() {
+export default function NavLogo(props) {
+  const {isHidden} = props;
   const [showNav, setShowNav] = useState(false);
 
   const handleClick = () => {
@@ -30,9 +32,10 @@ export default function NavLogo() {
     };
   }, [handleKeyPress]);
 
+  const baseOpacity = (isHidden) ? 0 : 0.5
   return (
     <motion.div
-      initial={{ opacity: 0.5 }}
+      initial={{ opacity: baseOpacity }}
       whileHover={{ opacity: 1 }}
       className={style.navContainer}
     >
@@ -51,12 +54,12 @@ export default function NavLogo() {
             className={showNav ? style.nav : style.navHidden}
           >
             <Link
-              to='/speaker'
+              to='/presenter'
               className={style.navItem}
               tabIndex={1}
-              onKeyDownCapture={() => <Redirect push to='/speaker' />}
+              onKeyDownCapture={() => <Redirect push to='/presenter' />}
             >
-              Speaker
+              Presenter
             </Link>
             <Link
               to='/sm'
@@ -90,9 +93,21 @@ export default function NavLogo() {
             >
               PIP
             </Link>
+            <Link
+              to='/studio'
+              className={style.navItem}
+              tabIndex={5}
+              onKeyDownCapture={() => <Redirect push to='/studio' />}
+            >
+              Studio Clock
+            </Link>
           </motion.div>
         )}
       </AnimatePresence>
     </motion.div>
   );
 }
+
+NavLogo.propTypes = {
+  isHidden: PropTypes.bool,
+}

client/src/common/components/nav/NavLogo.module.scss

@@ -1,6 +1,9 @@
+$nav-color: #fff;
+
 .navContainer {
   position: absolute;
   right: 2vw;
+  top: 1vw;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -23,4 +26,5 @@
   background-color: rgba(0, 0, 0, 0.7);
   padding: 0.5vh 1vw;
   border-radius: 4px;
+  color: $nav-color;
 }