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

Added initial focus trap during exercises/exams

Browse Source
This commit is contained in:
Joao Ramos
2023-08-16 00:08:20 +01:00
parent dd0acbea61
commit 93a5bcf40f
10 changed files with 2940 additions and 3359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Navbar.tsx
View File

@@ -1,24 +1,31 @@
import {User} from "@/interfaces/user";
import Link from "next/link";
import {Avatar} from "primereact/avatar";
import FocusLayer from '@/components/FocusLayer';
import { preventNavigation } from "@/utils/navigation.disabled";
interface Props {
user: User;
navDisabled?: boolean;
focusMode?: boolean;
}
/* eslint-disable @next/next/no-img-element */
export default function Navbar({user, navDisabled = false}: Props) {
export default function Navbar({user, navDisabled = false, focusMode = false}: Props) {
const disableNavigation = preventNavigation(navDisabled, focusMode);
return (
<header className="w-full bg-transparent py-4 gap-2 flex items-center">
<header className="w-full bg-transparent py-4 gap-2 flex items-center relative">
<h1 className="font-bold text-2xl w-1/6 px-8">EnCoach</h1>
<div className="flex justify-between w-5/6 mr-8">
<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
<Link href={!navDisabled ? "/profile" : ""} className="flex gap-3 items-center justify-end">
<Link href={disableNavigation ? "" : "/profile"} className="flex gap-3 items-center justify-end">
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
<span className="text-right">{user.name}</span>
</Link>
</div>
{focusMode && <FocusLayer/>}
</header>
);
}