encoach_frontend/src/components/MobileMenu.tsx

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 {BsXLg} from "react-icons/bs";

interface Props {
	isOpen: boolean;
	onClose: () => void;
	path: string;
	user: User;
	disableNavigation?: boolean;
}

export default function MobileMenu({isOpen, onClose, path, user, disableNavigation}: 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="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
								<Dialog.Title as="header" className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden">
									<Link href={disableNavigation ? "" : "/"}>
										<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
									</Link>
									<div className="cursor-pointer" onClick={onClose} tabIndex={0}>
										<BsXLg className="text-mti-purple-light text-2xl" onClick={onClose} />
									</div>
								</Dialog.Title>
								<div className="flex h-full flex-col gap-6 px-8 text-lg">
									<Link
										href={disableNavigation ? "" : "/"}
										className={clsx(
											"w-fit transition duration-300 ease-in-out",
											path === "/" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
										)}>
										Dashboard
									</Link>
									{(user.type === "student" || user.type === "teacher" || user.type === "developer") && (
										<>
											<Link
												href={disableNavigation ? "" : "/exam"}
												className={clsx(
													"w-fit transition duration-300 ease-in-out",
													path === "/exam" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
												)}>
												Exams
											</Link>
											<Link
												href={disableNavigation ? "" : "/exercises"}
												className={clsx(
													"w-fit transition duration-300 ease-in-out",
													path === "/exercises" &&
														"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
												)}>
												Exercises
											</Link>
										</>
									)}
									<Link
										href={disableNavigation ? "" : "/stats"}
										className={clsx(
											"w-fit transition duration-300 ease-in-out",
											path === "/stats" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
										)}>
										Stats
									</Link>
									<Link
										href={disableNavigation ? "" : "/record"}
										className={clsx(
											"w-fit transition duration-300 ease-in-out",
											path === "/record" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
										)}>
										Record
									</Link>
									{["admin", "developer", "agent", "corporate"].includes(user.type) && (
										<Link
											href={disableNavigation ? "" : "/payment-record"}
											className={clsx(
												"w-fit transition duration-300 ease-in-out",
												path === "/payment-record" &&
													"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
											)}>
											Payment Record
										</Link>
									)}
									{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
										<Link
											href={disableNavigation ? "" : "/settings"}
											className={clsx(
												"w-fit transition duration-300 ease-in-out",
												path === "/settings" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
											)}>
											Settings
										</Link>
									)}
									{["admin", "developer", "agent"].includes(user.type) && (
										<Link
											href={disableNavigation ? "" : "/tickets"}
											className={clsx(
												"w-fit transition duration-300 ease-in-out",
												path === "/tickets" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
											)}>
											Tickets
										</Link>
									)}
									<Link
										href={disableNavigation ? "" : "/profile"}
										className={clsx(
											"w-fit transition duration-300 ease-in-out",
											path === "/profile" && "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
										)}>
										Profile
									</Link>

									<span
										className={clsx("w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out")}
										onClick={logout}>
										Logout
									</span>
								</div>
							</Dialog.Panel>
						</Transition.Child>
					</div>
				</div>
			</Dialog>
		</Transition>
	);
}