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

119
src/components/MobileMenu.tsx
View File

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

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" />