Redesigned the Record page along with solving some bugs on the FillBlanks

src/components/Exercises/FillBlanks.tsx

@@ -17,7 +17,9 @@ interface WordsDrawerProps {
 function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}: WordsDrawerProps) {
 	const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
 
-	useEffect(() => setSelectedWord(previouslySelectedWord), [previouslySelectedWord]);
+	useEffect(() => {
+		console.log({previouslySelectedWord}), setSelectedWord(previouslySelectedWord);
+	}, [previouslySelectedWord]);
 
 	return (
 		<>
@@ -79,11 +81,11 @@ export default function FillBlanks({
 }: FillBlanksExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
 	const [currentBlankId, setCurrentBlankId] = useState<string>();
-	const [blankSelectedWord, setBlankSelectedWord] = useState<string>();
+	const [isDrawerShowing, setIsDrawerShowing] = useState(false);
 
 	useEffect(() => {
-		setBlankSelectedWord(currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined);
-	}, [answers, currentBlankId]);
+		setTimeout(() => setIsDrawerShowing(!!currentBlankId), 100);
+	}, [currentBlankId]);
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
@@ -120,17 +122,19 @@ export default function FillBlanks({
 	return (
 		<>
 			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
-				<WordsDrawer
-					blankId={currentBlankId}
-					words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
-					previouslySelectedWord={blankSelectedWord}
-					isOpen={!!currentBlankId}
-					onCancel={() => setCurrentBlankId(undefined)}
-					onAnswer={(solution: string) => {
-						setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
-						setCurrentBlankId(undefined);
-					}}
-				/>
+				{(!!currentBlankId || isDrawerShowing) && (
+					<WordsDrawer
+						blankId={currentBlankId}
+						words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
+						previouslySelectedWord={currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined}
+						isOpen={isDrawerShowing}
+						onCancel={() => setCurrentBlankId(undefined)}
+						onAnswer={(solution: string) => {
+							setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
+							setCurrentBlankId(undefined);
+						}}
+					/>
+				)}
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/Exercises/MatchSentences.tsx

@@ -53,7 +53,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 									className={clsx(
 										"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
 										"transition duration-300 ease-in-out",
-										selectedQuestion === id && "!text-white bg-mti-green",
+										selectedQuestion === id && "!text-white !bg-mti-green",
 										id,
 									)}>
 									{id}

src/components/High/Layout.tsx

@@ -1,5 +1,6 @@
 import {User} from "@/interfaces/user";
 import clsx from "clsx";
+import {useRouter} from "next/router";
 import Navbar from "../Navbar";
 import Sidebar from "../Sidebar";
 
@@ -10,11 +11,13 @@ interface Props {
 }
 
 export default function Layout({user, children, className}: Props) {
+	const router = useRouter();
+
 	return (
 		<main className="w-full min-h-full h-screen 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={window.location.pathname} />
+				<Sidebar path={router.pathname} />
 				<div
 					className={clsx(
 						"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden",

src/components/Sidebar.tsx

@@ -48,7 +48,7 @@ export default function Sidebar({path}: Props) {
 				<Nav Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
 				<Nav Icon={BsPencil} label="Exercises" path={path} keyPath="/#" />
 				<Nav Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
-				<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/#" />
+				<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
 			</div>
 
 			<div