devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disabled the navigation on the mobile menu

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-09 16:48:25 +00:00
parent 03f78ceb46
commit 1895b9e183
2 changed files with 150 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
src/components/MobileMenu.tsx
View File

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

4
src/components/Navbar.tsx
View File

@@ -62,7 +62,9 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
<TicketSubmission user={user} page={window.location.href} onClose={() => setIsTicketOpen(false)} /> <TicketSubmission user={user} page={window.location.href} onClose={() => setIsTicketOpen(false)} />
</Modal> </Modal>
{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />} {user && (
<MobileMenu disableNavigation={disableNavigation} path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />
)}
<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4"> <header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
<Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8"> <Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8">
<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" /> <img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />