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";
import { checkAccess, getTypesOfUser } from "@/utils/permissions";

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>
                  {checkAccess(user, ["student", "teacher", "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 ? "" : "/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>
                  {checkAccess(user, [
                    "admin",
                    "developer",
                    "agent",
                    "corporate",
                    "mastercorporate",
                  ]) && (
                    <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>
                  )}
                  {checkAccess(user, [
                    "admin",
                    "developer",
                    "corporate",
                    "teacher",
                    "mastercorporate",
                  ]) && (
                    <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>
                  )}
                  {checkAccess(user, ["admin", "developer", "agent"]) && (
                    <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>
  );
}