feat(frontend): create auth wrapper components bb-189

apps/frontend/src/libs/components/app/app.tsx

@@ -1,9 +1,7 @@
 import {
-	Header,
 	Loader,
 	Notification,
 	RouterOutlet,
-	Sidebar,
 } from "~/libs/components/components.js";
 import { AppRoute, DataStatus } from "~/libs/enums/enums.js";
 import {
@@ -41,8 +39,6 @@ const App: React.FC = () => {
 			{isLoading && <Loader />}
 			{!isLoading && isRoot && (
 				<>
-					<Header />
-					<Sidebar />
 					<QuizForm />
 				</>
 			)}

apps/frontend/src/libs/components/auth-wrapper/auth-wrapper.tsx

@@ -0,0 +1,22 @@
+import { Header, Sidebar } from "../components.js";
+import style from "./style.module.css";
+
+type Properties = {
+	children: React.ReactNode;
+};
+
+const AuthWrapper: React.FC<Properties> = ({ children }: Properties) => {
+	return (
+		<main className={style["auth-wrapper-container"]}>
+			<section className={style["left-side-section"]}>
+				<Sidebar />
+			</section>
+			<section className={style["right-side-section"]}>
+				<Header />
+				{children}
+			</section>
+		</main>
+	);
+};
+
+export { AuthWrapper };

apps/frontend/src/libs/components/auth-wrapper/style.module.css

@@ -0,0 +1,12 @@
+.auth-wrapper-container {
+	display: flex;
+	height: 100vh;
+}
+
+.left-side-section {
+	height: 100%;
+}
+
+.right-side-section {
+	width: 100%;
+}

apps/frontend/src/libs/components/protected-route/protected-route.tsx

@@ -3,6 +3,8 @@ import { type AppRoute } from "~/libs/enums/enums.js";
 import { useAppSelector } from "~/libs/hooks/hooks.js";
 import { type ValueOf } from "~/libs/types/types.js";
 
+import { AuthWrapper } from "../auth-wrapper/auth-wrapper.js";
+
 type Properties = {
 	component: React.ReactNode;
 	redirectTo: ValueOf<typeof AppRoute>;
@@ -15,7 +17,7 @@ const ProtectedRoute: React.FC<Properties> = ({
 	const user = useAppSelector(({ auth }) => auth.user);
 
 	if (user) {
-		return component;
+		return <AuthWrapper>{component}</AuthWrapper>;
 	}
 
 	return <Navigate replace to={redirectTo} />;

apps/frontend/src/libs/components/sidebar/styles.module.css

@@ -1,4 +1,5 @@
 .sidebar-container {
+	height: 100%;
 	background-color: var(--background-gray);
 }