Started improving the responsiveness of the application

src/components/High/Layout.tsx

@@ -19,13 +19,12 @@ export default function Layout({user, children, className, navDisabled = false,
 
 	return (
 		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative">
-			<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+			<Navbar
-			<BottomBar
 				path={router.pathname}
+				user={user}
 				navDisabled={navDisabled}
 				focusMode={focusMode}
 				onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-				className="lg:hidden absolute bottom-0 left-0 w-full z-20"
 			/>
 			<div className="h-full w-full flex gap-2">
 				<Sidebar
@@ -33,12 +32,12 @@ export default function Layout({user, children, className, navDisabled = false,
 					navDisabled={navDisabled}
 					focusMode={focusMode}
 					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-					className="-lg:hidden"
+					className="-md:hidden"
 					showAdmin={user.type !== "student"}
 				/>
 				<div
 					className={clsx(
-						"w-full min-h-full h-fit lg:mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden mt-2",
+						"w-full min-h-full h-fit lg:mr-8 bg-white shadow-md rounded-2xl p-4 md:p-12 pb-8 flex flex-col gap-8 md:gap-12 relative overflow-hidden mt-2",
 						className,
 					)}>
 					{children}

src/components/Low/ProgressBar.tsx

@@ -7,9 +7,10 @@ interface Props {
 	color: "red" | "rose" | "purple" | Module;
 	useColor?: boolean;
 	className?: string;
+	textClassName?: string;
 }
 
-export default function ProgressBar({label, percentage, color, useColor = false, className}: Props) {
+export default function ProgressBar({label, percentage, color, useColor = false, className, textClassName}: Props) {
 	const progressColorClass: {[key in typeof color]: string} = {
 		red: "bg-mti-red-light",
 		rose: "bg-mti-rose-light",
@@ -32,7 +33,7 @@ export default function ProgressBar({label, percentage, color, useColor = false,
 				style={{width: `${percentage}%`}}
 				className={clsx("absolute transition-all duration-300 ease-in-out top-0 left-0 h-full overflow-hidden", progressColorClass[color])}
 			/>
-			<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
+			<span className={clsx("z-10 justify-self-center text-white text-sm font-bold", textClassName)}>{label}</span>
 		</div>
 	);
 }

src/components/MobileMenu.tsx

@@ -0,0 +1,133 @@
+import {User} from "@/interfaces/user";
+import {Dialog, Transition} from "@headlessui/react";
+import axios from "axios";
+import clsx from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import {Fragment} from "react";
+import {BsShield, BsShieldFill, BsXLg} from "react-icons/bs";
+
+interface Props {
+	isOpen: boolean;
+	onClose: () => void;
+	path: string;
+	user: User;
+}
+
+export default function MobileMenu({isOpen, onClose, path, user}: Props) {
+	const router = useRouter();
+
+	const logout = async () => {
+		axios.post("/api/logout").finally(() => {
+			setTimeout(() => router.reload(), 500);
+		});
+	};
+
+	return (
+		<Transition appear show={isOpen} as={Fragment}>
+			<Dialog as="div" className="relative z-10" onClose={onClose}>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0">
+					<div className="fixed inset-0 bg-black bg-opacity-25" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 overflow-y-auto">
+					<div className="flex min-h-full items-center justify-center text-center">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95">
+							<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
+								<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
+									<Link href="/">
+										<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+									</Link>
+									<div className="cursor-pointer" onClick={onClose} tabIndex={0}>
+										<BsXLg className="text-2xl text-mti-purple-light" onClick={onClose} />
+									</div>
+								</Dialog.Title>
+								<div className="flex flex-col h-full gap-6 px-8 text-lg">
+									<Link
+										href="/"
+										className={clsx(
+											"transition ease-in-out duration-300 w-fit",
+											path === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+										)}>
+										Dashboard
+									</Link>
+									<Link
+										href="/exam"
+										className={clsx(
+											"transition ease-in-out duration-300 w-fit",
+											path === "/exam" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+										)}>
+										Exams
+									</Link>
+									<Link
+										href="/exercise"
+										className={clsx(
+											"transition ease-in-out duration-300 w-fit",
+											path === "/exercise" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+										)}>
+										Exercises
+									</Link>
+									<Link
+										href="/stats"
+										className={clsx(
+											"transition ease-in-out duration-300 w-fit",
+											path === "/stats" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+										)}>
+										Stats
+									</Link>
+									<Link
+										href="/record"
+										className={clsx(
+											"transition ease-in-out duration-300 w-fit",
+											path === "/record" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+										)}>
+										Record
+									</Link>
+									{user.type !== "student" && (
+										<Link
+											href="/admin"
+											className={clsx(
+												"transition ease-in-out duration-300 w-fit",
+												path === "/admin" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+											)}>
+											Admin
+										</Link>
+									)}
+									<Link
+										href="/profile"
+										className={clsx(
+											"transition ease-in-out duration-300 w-fit",
+											path === "/profile" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
+										)}>
+										Profile
+									</Link>
+
+									<span
+										className={clsx("transition ease-in-out duration-300 w-fit justify-self-end cursor-pointer")}
+										onClick={logout}>
+										Logout
+									</span>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition>
+	);
+}

src/components/Navbar.tsx

@@ -5,19 +5,24 @@ import {preventNavigation} from "@/utils/navigation.disabled";
 import {useRouter} from "next/router";
 import axios from "axios";
 import {RiLogoutBoxFill} from "react-icons/ri";
-import {BsPower} from "react-icons/bs";
+import {BsList, BsPower} from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
+import MobileMenu from "./MobileMenu";
+import {useState} from "react";
 
 interface Props {
 	user: User;
 	navDisabled?: boolean;
 	focusMode?: boolean;
 	onFocusLayerMouseEnter?: () => void;
+	path: string;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({user, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+
 	const disableNavigation = preventNavigation(navDisabled, focusMode);
 	const router = useRouter();
 
@@ -40,12 +45,14 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
 	};
 
 	return (
+		<>
+			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
 			<header className="w-full bg-transparent py-4 -lg:justify-between lg:gap-12 flex items-center relative -lg:px-4">
 				<Link href={disableNavigation ? "" : "/"} className=" lg:px-8 flex gap-8 items-center">
 					<img src="/logo.png" alt="EnCoach's Logo" className="w-12" />
 					<h1 className="font-bold text-2xl w-1/6 -lg:hidden">EnCoach</h1>
 				</Link>
-			<div className="flex justify-end gap-4 lg:w-5/6 lg:mr-8">
+				<div className="flex justify-end -md:items-center gap-4 lg:w-5/6 lg:mr-8">
 					{showExpirationDate() && (
 						<Link
 							href="https://encoach.com/join"
@@ -62,13 +69,16 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
 							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
 						</Link>
 					)}
-				<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end">
+					<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
 						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
 						<span className="text-right -lg:hidden">{user.name}</span>
-					<BsPower size={40} className="bg-mti-red-light px-2 rounded-full text-white lg:hidden" />
 					</Link>
+					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
+						<BsList className="text-mti-purple-light" size={32} />
+					</div>
 				</div>
 				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
 			</header>
+		</>
 	);
 }

src/pages/index.tsx

@@ -20,6 +20,7 @@ import axios from "axios";
 import DemographicInformationInput from "@/components/DemographicInformationInput";
 import moment from "moment";
 import Link from "next/link";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -158,28 +159,37 @@ export default function Home() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user}>
-					<section className="w-full flex gap-8">
+					<section className="w-full flex -md:flex-col gap-4 md:gap-8">
-						<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
+						<img
-						<div className="flex flex-col gap-4 py-4 w-full">
+							src={user.profilePicture}
-							<div className="flex justify-between w-full gap-8">
+							alt={user.name}
+							className="aspect-square h-20 md:h-64 rounded-3xl drop-shadow-xl object-cover -md:hidden"
+						/>
+						<div className="flex md:flex-col gap-4 md:py-4 w-full -md:items-center">
+							<img
+								src={user.profilePicture}
+								alt={user.name}
+								className="aspect-square h-24 md:hidden rounded-3xl drop-shadow-xl object-cover"
+							/>
+							<div className="flex -md:flex-col justify-between w-full gap-8">
 								<div className="flex flex-col gap-2 py-2">
-									<h1 className="font-bold text-4xl">{user.name}</h1>
+									<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
 									<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
 								</div>
 								<ProgressBar
 									label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
 									percentage={100}
 									color="purple"
-									className="max-w-xs w-32 self-end h-10"
+									className="max-w-xs w-32 md:self-end h-10 -md:hidden"
 								/>
 							</div>
 							<ProgressBar
 								label=""
 								percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
 								color="red"
-								className="w-full h-3 drop-shadow-lg"
+								className="w-full h-3 drop-shadow-lg -md:hidden"
 							/>
-							<div className="flex justify-between w-full mt-8">
+							<div className="flex justify-between w-full mt-8 -md:hidden">
 								<div className="flex gap-4 items-center">
 									<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
 										<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
@@ -209,100 +219,82 @@ export default function Home() {
 								</div>
 							</div>
 						</div>
+
+						<ProgressBar
+							label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
+							percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
+							color="purple"
+							className="w-full md:hidden h-8"
+							textClassName="!text-mti-black"
+						/>
+
+						<div className="grid grid-cols-2  gap-4 w-full mt-4 md:hidden">
+							<div className="flex gap-4 items-center">
+								<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
+									<BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+								</div>
+								<div className="flex flex-col">
+									<span className="font-bold text-lg md:text-xl">{totalExams(stats)}</span>
+									<span className="font-normal text-sm md:text-base text-mti-gray-dim">Exams</span>
+								</div>
+							</div>
+							<div className="flex gap-4 items-center">
+								<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
+									<BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+								</div>
+								<div className="flex flex-col">
+									<span className="font-bold text-lg md:text-xl">{stats.length}</span>
+									<span className="font-normal text-sm md:text-base text-mti-gray-dim">Exercises</span>
+								</div>
+							</div>
+							<div className="flex gap-4 items-center col-span-2">
+								<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
+									<BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+								</div>
+								<div className="flex flex-col">
+									<span className="font-bold text-lg md:text-xl">{stats.length > 0 ? averageScore(stats) : 0}%</span>
+									<span className="font-normal text-sm md:text-base text-mti-gray-dim">Average Score</span>
+								</div>
+							</div>
+						</div>
 					</section>
-					<section className="flex flex-col gap-3">
+
+					<section className="flex flex-col gap-1 md:gap-3">
 						<span className="font-bold text-lg">Bio</span>
 						<span className="text-mti-gray-taupe">
 							{user.bio || "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
 						</span>
 					</section>
+
 					<section className="flex flex-col gap-3">
 						<span className="font-bold text-lg">Score History</span>
-						<div className="grid grid-cols-2 gap-6">
+						<div className="grid -md:grid-rows-4 md:grid-cols-2 gap-6">
-							<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
+							{MODULE_ARRAY.map((module) => (
-								<div className="flex gap-3 items-center">
+								<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4" key={module}>
-									<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
+									<div className="flex gap-2 md:gap-3 items-center">
-										<BsBook className="text-ielts-reading w-5 h-5" />
+										<div className="w-8 h-8 md:w-12 md:h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
+											{module === "reading" && <BsBook className="text-ielts-reading w-4 h-4 md:w-5 md:h-5" />}
+											{module === "listening" && <BsHeadphones className="text-ielts-listening w-4 h-4 md:w-5 md:h-5" />}
+											{module === "writing" && <BsPencil className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
+											{module === "speaking" && <BsMegaphone className="text-ielts-speaking w-4 h-4 md:w-5 md:h-5" />}
 										</div>
 										<div className="flex justify-between w-full">
-										<span className="font-extrabold text-sm">Reading</span>
+											<span className="font-bold md:font-extrabold text-sm">{capitalize(module)}</span>
 											<span className="text-sm font-normal text-mti-gray-dim">
-											Level {user.levels.reading} / Level {user.desiredLevels.reading}
+												Level {user.levels[module]} / Level {user.desiredLevels[module]}
 											</span>
 										</div>
 									</div>
-								<div className="pl-14">
+									<div className="md:pl-14">
 										<ProgressBar
-										color="red"
+											color={module}
 											label=""
-										percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
+											percentage={Math.round((user.levels[module] * 100) / user.desiredLevels[module])}
-										className="w-full h-2"
-									/>
-								</div>
-							</div>
-							<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
-								<div className="flex gap-3 items-center">
-									<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
-										<BsPen className="text-ielts-writing w-5 h-5" />
-									</div>
-									<div className="flex justify-between w-full">
-										<span className="font-extrabold text-sm">Writing</span>
-										<span className="text-sm font-normal text-mti-gray-dim">
-											Level {user.levels.writing} / Level {user.desiredLevels.writing}
-										</span>
-									</div>
-								</div>
-								<div className="pl-14">
-									<ProgressBar
-										color="red"
-										label=""
-										percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
-										className="w-full h-2"
-									/>
-								</div>
-							</div>
-							<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
-								<div className="flex gap-3 items-center">
-									<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
-										<BsHeadphones className="text-ielts-listening w-5 h-5" />
-									</div>
-									<div className="flex justify-between w-full">
-										<span className="font-extrabold text-sm">Listening</span>
-										<span className="text-sm font-normal text-mti-gray-dim">
-											Level {user.levels.listening} / Level {user.desiredLevels.listening}
-										</span>
-									</div>
-								</div>
-								<div className="pl-14">
-									<ProgressBar
-										color="red"
-										label=""
-										percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
-										className="w-full h-2"
-									/>
-								</div>
-							</div>
-							<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
-								<div className="flex gap-3 items-center">
-									<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
-										<BsMegaphone className="text-ielts-speaking w-5 h-5" />
-									</div>
-									<div className="flex justify-between w-full">
-										<span className="font-extrabold text-sm">Speaking</span>
-										<span className="text-sm font-normal text-mti-gray-dim">
-											Level {user.levels.speaking} / Level {user.desiredLevels.speaking}
-										</span>
-									</div>
-								</div>
-								<div className="pl-14">
-									<ProgressBar
-										color="red"
-										label=""
-										percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
 											className="w-full h-2"
 										/>
 									</div>
 								</div>
+							))}
 						</div>
 					</section>
 				</Layout>