diff --git a/client/package.json b/client/package.json
index 8bd8947b3..7b7d00292 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
{
"name": "ontime-ui",
- "version": "1.0.1",
+ "version": "1.1.0",
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.0.0-next.3",
diff --git a/client/src/common/components/nav/NavLogo.jsx b/client/src/common/components/nav/NavLogo.jsx
index 7bba30c01..53ae0fe55 100644
--- a/client/src/common/components/nav/NavLogo.jsx
+++ b/client/src/common/components/nav/NavLogo.jsx
@@ -5,6 +5,16 @@ import { Image } from '@chakra-ui/react';
import { AnimatePresence, motion } from 'framer-motion';
import navlogo from 'assets/images/logos/LOGO-72.png';
import style from './NavLogo.module.scss';
+import { IconButton } from '@chakra-ui/button';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+
+/* Styling for action buttons */
+const navButtonStyle = {
+ size: 'md',
+ variant: 'outline',
+ colorScheme: 'whiteAlpha',
+ _hover: { bg: '#ebedf0', color: '#333' },
+};
export default function NavLogo(props) {
const { isHidden } = props;
@@ -24,6 +34,16 @@ export default function NavLogo(props) {
}
}, []);
+ const toggleFullscreen = useCallback(() => {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen();
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ }
+ }
+ }, []);
+
useEffect(() => {
// attach the event listener
document.addEventListener('keydown', handleKeyPress);
@@ -49,33 +69,51 @@ export default function NavLogo(props) {
{showNav && (
-
- Timer
-
- Minimal Timer
-
-
- Backstage
-
-
- Public
-
-
- Lower Thirds
-
-
- PIP
-
-
- Studio Clock
-
-
+ <>
+
+ }
+ onClick={toggleFullscreen}
+ {...navButtonStyle}
+ />
+
+
+
+ Timer
+
+
+ Minimal Timer
+
+
+ Backstage
+
+
+ Public
+
+
+ Lower Thirds
+
+
+ PIP
+
+
+ Studio Clock
+
+
+ >
)}
diff --git a/client/src/common/components/nav/NavLogo.module.scss b/client/src/common/components/nav/NavLogo.module.scss
index 4eb069dec..67ecabd7c 100644
--- a/client/src/common/components/nav/NavLogo.module.scss
+++ b/client/src/common/components/nav/NavLogo.module.scss
@@ -18,6 +18,7 @@
.nav,
.showNav {
+ margin-top: 2vh;
gap: 2vh;
display: flex;
flex-direction: column;
@@ -29,4 +30,12 @@
color: $text-white;
}
}
+
+ .actions {
+ display: flex;
+ gap: 8px;
+ position: absolute;
+ top: 0.5vw;
+ right: 75px;
+ }
}