Updated part of the Selection screen to the new design

src/pages/exam.tsx

@@ -19,6 +19,7 @@ import Speaking from "@/exams/Speaking";
 import {v4 as uuidv4} from "uuid";
 import useUser from "@/hooks/useUser";
 import useExamStore from "@/stores/examStore";
+import Sidebar from "@/components/Sidebar";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -207,7 +208,15 @@ export default function Page() {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			{user && <main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 pb-4 gap-4">{renderScreen()}</main>}
+			{user && (
+				<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke">
+					<Navbar user={user} />
+					<div className="h-full w-full flex py-4 pb-8 gap-2">
+						<Sidebar path="/exam" />
+						<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12 flex flex-col gap-12">{renderScreen()}</div>
+					</div>
+				</main>
+			)}
 		</>
 	);
 }