Started the redesign of the dashboard

src/components/Navbar.tsx

@@ -1,77 +1,22 @@
-import {Type} from "@/interfaces/user";
-import axios from "axios";
-import Link from "next/link";
-import {useRouter} from "next/router";
-import {Button} from "primereact/button";
-import {Menubar} from "primereact/menubar";
-import {MenuItem} from "primereact/menuitem";
+import {User} from "@/interfaces/user";
+import {Avatar} from "primereact/avatar";
 
 interface Props {
-	profilePicture: string;
-	userType: Type;
-	timer?: number;
-	showExamEnd?: boolean;
+	user: User;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({profilePicture, userType, timer, showExamEnd = false}: Props) {
-	const router = useRouter();
-
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			router.push("/login");
-		});
-	};
-
-	const items: MenuItem[] = [
-		{
-			label: "Home",
-			icon: "pi pi-fw pi-home",
-			url: "/",
-		},
-		{
-			label: "Account",
-			icon: "pi pi-fw pi-user",
-			url: "/profile",
-		},
-		{
-			label: "Exam",
-			icon: "pi pi-fw pi-plus-circle",
-			url: "/exam",
-		},
-		{
-			label: "Users",
-			icon: "pi pi-fw pi-users",
-			items: [
-				...(userType === "student" ? [] : [{label: "List", icon: "pi pi-fw pi-users", url: "/users"}]),
-				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"},
-				{label: "History", icon: "pi pi-fw pi-history", url: "/history"},
-			],
-		},
-		{
-			label: "Logout",
-			icon: "pi pi-fw pi-power-off",
-			command: logout,
-		},
-	];
-
-	const endTimer = timer && (
-		<span className="pr-2 font-semibold">
-			{Math.floor(timer / 60) < 10 ? "0" : ""}
-			{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
-			{timer % 60}
-		</span>
-	);
-
-	const endNewExam = (
-		<Link href="/exam" className="pr-2">
-			<Button text label="Exam" severity="secondary" size="small" />
-		</Link>
-	);
-
+export default function Navbar({user}: Props) {
 	return (
-		<div className="bg-neutral-100 z-10 w-full p-2">
-			<Menubar model={items} end={showExamEnd ? endNewExam : endTimer} />
-		</div>
+		<header className="w-full bg-transparent py-4 gap-2 flex items-center">
+			<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
+			<div className="flex justify-between w-5/6 mr-8">
+				<input type="text" placeholder="Search..." className="rounded-full py-3 px-6 shadow-md outline-none" />
+				<div className="flex gap-3 items-center justify-end">
+					<Avatar size="normal" label={user.name.slice(0, 1)} shape="circle" />
+					<span className="text-right">{user.name}</span>
+				</div>
+			</div>
+		</header>
 	);
 }

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>
+	);
+}