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

src/components/LevelProgressBar.tsx

@@ -7,7 +7,7 @@ interface Props {
 	progressBarWidth?: string;
 }
 
-export default function LevelProgressBar({experience, className, progressBarWidth = "w-64"}: Props) {
+export default function LevelProgressBar({experience, className, progressBarWidth = "w-32 md:w-64"}: Props) {
 	const levelResult = levelCalculator(experience);
 
 	return (

src/components/Navbar.tsx

@@ -6,10 +6,11 @@ import {MenuItem} from "primereact/menuitem";
 
 interface Props {
 	profilePicture: string;
+	timer?: number;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({profilePicture}: Props) {
+export default function Navbar({profilePicture, timer}: Props) {
 	const router = useRouter();
 
 	const logout = async () => {
@@ -49,9 +50,17 @@ export default function Navbar({profilePicture}: Props) {
 		},
 	];
 
+	const end = timer && (
+		<span className="pr-2 font-semibold">
+			{Math.floor(timer / 60) < 10 ? "0" : ""}
+			{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
+			{timer % 60}
+		</span>
+	);
+
 	return (
 		<div className="bg-neutral-100 z-10 w-full p-2">
-			<Menubar model={items} />
+			<Menubar model={items} end={end} />
 		</div>
 	);
 }

src/exams/Listening.tsx

@@ -1,5 +1,5 @@
 import {ListeningExam, UserSolution} from "@/interfaces/exam";
-import {useEffect, useState} from "react";
+import {useState} from "react";
 import Icon from "@mdi/react";
 import {mdiArrowRight} from "@mdi/js";
 import clsx from "clsx";
@@ -16,18 +16,8 @@ interface Props {
 export default function Listening({exam, showSolutions = false, onFinish}: Props) {
 	const [exerciseIndex, setExerciseIndex] = useState(-1);
 	const [timesListened, setTimesListened] = useState(0);
-	const [timer, setTimer] = useState<number>();
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 
-	useEffect(() => {
-		setTimer(exam.minTimer * 60);
-		const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
-
-		return () => {
-			clearInterval(timerInterval);
-		};
-	}, [exam.minTimer]);
-
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -78,13 +68,6 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 	return (
 		<>
 			<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
-				{timer && (
-					<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-listening border-2 p-2 rounded-xl bg-ielts-listening-transparent text-white">
-						{Math.floor(timer / 60) < 10 ? "0" : ""}
-						{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
-						{timer % 60}
-					</div>
-				)}
 				{renderAudioPlayer()}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&

src/exams/Reading.tsx

@@ -76,18 +76,8 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
 export default function Reading({exam, showSolutions = false, onFinish}: Props) {
 	const [exerciseIndex, setExerciseIndex] = useState(-1);
 	const [showTextModal, setShowTextModal] = useState(false);
-	const [timer, setTimer] = useState<number>();
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 
-	useEffect(() => {
-		setTimer(exam.minTimer * 60);
-		const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
-
-		return () => {
-			clearInterval(timerInterval);
-		};
-	}, [exam.minTimer]);
-
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -131,13 +121,6 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		<>
 			<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
 			<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
-				{timer && (
-					<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-reading border-2 p-2 rounded-xl bg-ielts-reading-transparent text-white">
-						{Math.floor(timer / 60) < 10 ? "0" : ""}
-						{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
-						{timer % 60}
-					</div>
-				)}
 				{exerciseIndex === -1 && renderText()}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&

src/exams/Selection.tsx

@@ -26,10 +26,10 @@ export default function Selection({user, onStart}: Props) {
 	return (
 		<>
 			<div className="w-full h-full relative">
-				<section className="h-full w-full flex flex-col items-center justify-center">
+				<section className="h-full w-full flex flex-col items-center justify-center gap-8">
 					<ProfileLevel user={user} className="h-1/2" />
-					<div className="h-1/2 flex flex-col">
+					<div className="h-1/2 flex flex-col gap-8">
-						<div className="h-1/2 flex gap-8">
+						<div className="h-1/2 items-center flex flex-col md:flex-row gap-8">
 							<div
 								role="button"
 								tabIndex={0}
@@ -83,7 +83,7 @@ export default function Selection({user, onStart}: Props) {
 								<span>Speaking</span>
 							</div>
 						</div>
-						<div className="w-full flex justify-between">
+						<div className="w-full flex flex-col gap-4 md:flex-row justify-between">
 							<button onClick={() => router.push("/")} className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)}>
 								<div className="absolute left-4">
 									<Icon path={mdiArrowLeft} color="white" size={1} />

src/exams/Speaking.tsx

@@ -16,18 +16,8 @@ interface Props {
 
 export default function Speaking({exam, showSolutions = false, onFinish}: Props) {
 	const [exerciseIndex, setExerciseIndex] = useState(0);
-	const [timer, setTimer] = useState<number>();
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 
-	useEffect(() => {
-		setTimer(exam.minTimer * 60);
-		const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
-
-		return () => {
-			clearInterval(timerInterval);
-		};
-	}, [exam.minTimer]);
-
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -51,13 +41,6 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 
 	return (
 		<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
-			{timer && (
-				<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-speaking border-2 p-2 rounded-xl bg-ielts-speaking-transparent text-white">
-					{Math.floor(timer / 60) < 10 ? "0" : ""}
-					{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
-					{timer % 60}
-				</div>
-			)}
 			{exerciseIndex > -1 &&
 				exerciseIndex < exam.exercises.length &&
 				!showSolutions &&

src/exams/Writing.tsx

@@ -16,18 +16,8 @@ interface Props {
 
 export default function Writing({exam, showSolutions = false, onFinish}: Props) {
 	const [exerciseIndex, setExerciseIndex] = useState(0);
-	const [timer, setTimer] = useState<number>();
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 
-	useEffect(() => {
-		setTimer(exam.minTimer * 60);
-		const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
-
-		return () => {
-			clearInterval(timerInterval);
-		};
-	}, [exam.minTimer]);
-
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -51,13 +41,6 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 
 	return (
 		<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
-			{timer && (
-				<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-writing border-2 p-2 rounded-xl bg-ielts-writing-transparent text-white">
-					{Math.floor(timer / 60) < 10 ? "0" : ""}
-					{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
-					{timer % 60}
-				</div>
-			)}
 			{exerciseIndex > -1 &&
 				exerciseIndex < exam.exercises.length &&
 				!showSolutions &&

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>
 		</>