Started the redesign of the dashboard

src/components/Sidebar.tsx

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import {IconType} from "react-icons";
+import {MdSpaceDashboard} from "react-icons/md";
+import {BsFileEarmarkText, BsClockHistory} from "react-icons/bs";
+import {RiLogoutBoxFill} from "react-icons/ri";
+import {SlPencil} from "react-icons/sl";
+import {FaAward} from "react-icons/fa";
+import Link from "next/link";
+import {useRouter} from "next/router";
+import axios from "axios";
+
+interface Props {
+	path: string;
+}
+
+interface NavProps {
+	Icon: IconType;
+	label: string;
+	path: string;
+	keyPath: string;
+}
+
+const Nav = ({Icon, label, path, keyPath}: NavProps) => (
+	<Link
+		href={keyPath}
+		className={clsx(
+			"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:bg-mti-green hover:text-white transition duration-300 ease-in-out",
+			path === keyPath && "bg-mti-green text-white",
+		)}>
+		<Icon size={20} />
+		<span>{label}</span>
+	</Link>
+);
+
+export default function Sidebar({path}: Props) {
+	const router = useRouter();
+
+	const logout = async () => {
+		axios.post("/api/logout").finally(() => {
+			router.push("/login");
+		});
+	};
+
+	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={SlPencil} label="Exercises" path={path} keyPath="/exercise" />
+				<Nav Icon={FaAward} label="Score" path={path} keyPath="/score" />
+				<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
+			</div>
+
+			<div
+				role="button"
+				tabIndex={1}
+				onClick={logout}
+				className={clsx(
+					"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-orange transition duration-300 ease-in-out",
+				)}>
+				<RiLogoutBoxFill size={20} />
+				<span>Log Out</span>
+			</div>
+		</section>
+	);
+}