Updated the styling of the Diagnostic page

This commit is contained in:
Tiago Ribeiro
2023-08-07 22:52:10 +01:00
parent d879f4afab
commit 7e9e28f134
7 changed files with 174 additions and 79 deletions

View File

@@ -11,6 +11,7 @@ import axios from "axios";
interface Props {
path: string;
navDisabled?: boolean;
}
interface NavProps {
@@ -18,11 +19,12 @@ interface NavProps {
label: string;
path: string;
keyPath: string;
disabled?: boolean;
}
const Nav = ({Icon, label, path, keyPath}: NavProps) => (
const Nav = ({Icon, label, path, keyPath, disabled = false}: NavProps) => (
<Link
href={keyPath}
href={!disabled ? keyPath : ""}
className={clsx(
"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-purple-light hover:text-white transition duration-300 ease-in-out",
path === keyPath && "bg-mti-purple-light text-white",
@@ -32,7 +34,7 @@ const Nav = ({Icon, label, path, keyPath}: NavProps) => (
</Link>
);
export default function Sidebar({path}: Props) {
export default function Sidebar({path, navDisabled = false}: Props) {
const router = useRouter();
const logout = async () => {
@@ -44,11 +46,11 @@ export default function Sidebar({path}: Props) {
return (
<section className="h-full flex bg-transparent flex-col justify-between w-1/6 px-4">
<div className="flex flex-col gap-3">
<Nav Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" />
<Nav Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
<Nav Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" />
<Nav Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
<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" />
</div>
<div