Created a system to go directly to an assignment from a URL

src/components/High/Layout.tsx

@@ -11,36 +11,42 @@ interface Props {
 	className?: string;
 	navDisabled?: boolean;
 	focusMode?: boolean;
+	hideSidebar?: boolean
 	bgColor?: string;
 	onFocusLayerMouseEnter?: () => void;
 }
 
-export default function Layout({user, children, className, bgColor="bg-white", navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+export default function Layout({user, children, className, bgColor="bg-white", hideSidebar, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const router = useRouter();
 
 	return (
 		<main className={clsx("w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative")}>
 			<ToastContainer />
-			<Navbar
-				path={router.pathname}
-				user={user}
-				navDisabled={navDisabled}
-				focusMode={focusMode}
-				onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-			/>
-			<div className="h-full w-full flex gap-2">
-				<Sidebar
+			{!hideSidebar && (
+				<Navbar
 					path={router.pathname}
+					user={user}
 					navDisabled={navDisabled}
 					focusMode={focusMode}
 					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-					className="-md:hidden"
-					user={user}
 				/>
+			)}
+			<div className={clsx("h-full w-full flex gap-2")}>
+				{!hideSidebar && (
+					<Sidebar
+						path={router.pathname}
+						navDisabled={navDisabled}
+						focusMode={focusMode}
+						onFocusLayerMouseEnter={onFocusLayerMouseEnter}
+						className="-md:hidden"
+						user={user}
+					/>
+				)}
 				<div
 					className={clsx(
-						`w-full min-h-full md:mr-8 ${bgColor} shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2`,
+						`w-full min-h-full ${bgColor} shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2`,
 						bgColor !== "bg-white" ? "justify-center" : "h-fit",
+						hideSidebar ? "md:mx-8" : "md:mr-8",
 						className,
 					)}>
 					{children}