diff --git a/src/components/Tutorials/subComps/TutorialTitle.jsx b/src/components/Tutorials/subComps/TutorialTitle.jsx index 7afb46cf..c555c2a2 100644 --- a/src/components/Tutorials/subComps/TutorialTitle.jsx +++ b/src/components/Tutorials/subComps/TutorialTitle.jsx @@ -4,7 +4,10 @@ import Tooltip from "@mui/material/Tooltip"; import Grid from "@mui/material/Grid"; import QueryBuilderIcon from "@mui/icons-material/QueryBuilder"; import FullscreenIcon from "@mui/icons-material/Fullscreen"; +import FullscreenExitIcon from '@mui/icons-material/FullscreenExit' +import { useState } from "react"; import { Typography } from "@mui/material"; +import { set } from "lodash"; const TutorialHeading = ({ stepPanelVisible, @@ -13,8 +16,16 @@ const TutorialHeading = ({ tutorialData, timeRemaining }) => { + let [Fullscreen, setFullscreen] = useState(false); + const toggleFullscreen = () => { - document.documentElement.requestFullscreen(); + if (Fullscreen) { + setFullscreen(false); + document.exitFullscreen(); + } else { + setFullscreen(true); + document.documentElement.requestFullscreen(); + } }; let styleProps = { @@ -50,16 +61,25 @@ const TutorialHeading = ({ {timeRemaining} mins remaining - + {Fullscreen ? + : + - + } )}