Started improving the responsiveness of the application

2023-10-16 23:52:41 +01:00
parent aaa7d6deb3
commit 550cdba5a7
5 changed files with 264 additions and 129 deletions
--- a/src/components/MobileMenu.tsx
+++ b/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>
+	);
+}