Updated the timer to be on the Navbar, making it more mobile friendly

src/pages/exam/index.tsx

@@ -42,6 +42,7 @@ export default function Page({user}: {user: User}) {
 	const [exam, setExam] = useState<Exam>();
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 	const [showSolutions, setShowSolutions] = useState(false);
+	const [timer, setTimer] = useState(-1);
 
 	useEffect(() => {
 		(async () => {
@@ -53,6 +54,17 @@ export default function Page({user}: {user: User}) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedModules, moduleIndex]);
 
+	useEffect(() => {
+		if (exam) {
+			setTimer(exam.minTimer * 60);
+			const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
+
+			return () => {
+				clearInterval(timerInterval);
+			};
+		}
+	}, [exam]);
+
 	const getExam = async (module: Module): Promise<Exam | undefined> => {
 		const examRequest = await axios<Exam[]>(`/api/exam/${module}`);
 		if (examRequest.status !== 200) {
@@ -146,9 +158,9 @@ export default function Page({user}: {user: User}) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
+			<main className="w-full h-full md:h-screen flex flex-col items-center bg-neutral-100 text-black">
 				<ToastContainer />
-				<Navbar profilePicture={user.profilePicture} />
+				<Navbar profilePicture={user.profilePicture} timer={exam && timer} />
 				{renderScreen()}
 			</main>
 		</>