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

23
src/components/Sidebar.tsx
View File

@@ -8,10 +8,12 @@ import {FaAward} from "react-icons/fa";
import Link from "next/link";
import {useRouter} from "next/router";
import axios from "axios";
import FocusLayer from '@/components/FocusLayer';
import { preventNavigation } from "@/utils/navigation.disabled";
interface Props {
path: string;
navDisabled?: boolean;
focusMode?: boolean;
}
interface NavProps {
@@ -34,7 +36,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false}: NavProps) => (
</Link>
);
export default function Sidebar({path, navDisabled = false}: Props) {
export default function Sidebar({path, navDisabled = false, focusMode = false }: Props) {
const router = useRouter();
const logout = async () => {
@@ -43,20 +45,22 @@ export default function Sidebar({path, navDisabled = false}: Props) {
});
};
const disableNavigation: Boolean = preventNavigation(navDisabled, focusMode);
return (
<section className="h-full flex bg-transparent flex-col justify-between w-1/6 px-4">
<section className="h-full flex bg-transparent flex-col justify-between w-1/6 px-4 py-4 pb-8 relative">
<div className="flex flex-col gap-3">
<Nav disabled={navDisabled} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" />
<Nav disabled={navDisabled} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
<Nav disabled={navDisabled} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" />
<Nav disabled={navDisabled} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
<Nav disabled={navDisabled} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" />
<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" />
<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
</div>
<div
role="button"
tabIndex={1}
onClick={logout}
onClick={focusMode ? () => {} : logout}
className={clsx(
"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose transition duration-300 ease-in-out",
"absolute bottom-8",
@@ -64,6 +68,7 @@ export default function Sidebar({path, navDisabled = false}: Props) {
<RiLogoutBoxFill size={20} />
<span className="text-lg font-medium">Log Out</span>
</div>
{focusMode && <FocusLayer />}
</section>
);
}