✨ default double side page working

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss

@@ -1,31 +1,17 @@
 @import "@Themes/constants.scss";
 
 .root {
-	max-height: 100vh;
-	min-height: 100vh;
-	overflow: hidden;
-
 	.content {
 		display: flex;
-		height: calc(100vh - 83px);
-
-		.side-left {
-			max-height: 100vh;
-			overflow: auto;
-		}
 
 		.sides {
-			width: 50%;
+			min-height: calc(100vh - 83px);
-
+			flex: 1;
 			@media (max-width: $screen-m) {
 				width: 100%;
 			}
 
 			&.image-container {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
 				@media (max-width: $screen-m) {
 					display: none;
 				}
@@ -34,23 +20,19 @@
 
 				.image {
 					width: 100%;
-					height: 100%;
 					object-fit: contain;
 				}
 			}
 
 			&.background-image-container {
-				display: flex;
+				height: 0px;
-				align-items: center;
-				justify-content: center;
-
 				@media (max-width: $screen-m) {
 					display: none;
 				}
 
 				.background-image {
-					height: 100%;
 					width: 100%;
+					height: 100%;
 					object-fit: cover;
 				}
 			}

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx

@@ -2,7 +2,7 @@ import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import classNames from "classnames";
 import Image, { StaticImageData } from "next/image";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect, useRef } from "react";
 
 import classes from "./classes.module.scss";
 
@@ -12,47 +12,51 @@ type IProps = {
 	/**
 	 * @description scroll top with number or disabled with null
 	 */
-	scrollTop: number | null;
+	scrollTop?: number | null;
 	image: StaticImageData;
-	type: "background" | "image";
+	type?: "background" | "image";
-	showHeader: boolean;
+	showHeader?: boolean;
 };
 
-type IState = {};
+export default function DefaultDoubleSidePage(props: IProps) {
+	const { title, children, scrollTop = 0, image, type = "background", showHeader = false } = props;
 
-export default class DefaultDoubleSidePage extends React.Component<IProps, IState> {
+	useEffect(() => {
-	public static defaultProps = {
+		window.document.title = title;
-		scrollTop: 0,
+		if (scrollTop !== null) {
-		type: "background",
+			window.scrollTo(0, scrollTop);
-		showHeader: false,
-	};
-
-	public override render(): JSX.Element {
-		return (
-			<div className={classes["root"]}>
-				<Header isUserConnected={this.props.showHeader} />
-				<div className={classes["content"]}>
-					<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
-					{this.props.type === "image" && (
-						<div className={classNames(classes["sides"], classes["image-container"])}>
-							<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
-						</div>
-					)}
-					{this.props.type === "background" && (
-						<div className={classNames(classes["sides"], classes["background-image-container"])}>
-							<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} priority />
-						</div>
-					)}
-				</div>
-				<Version />
-			</div>
-		);
-	}
-
-	public override componentDidMount() {
-		window.document.title = this.props.title;
-		if (this.props.scrollTop !== null) {
-			window.scrollTo(0, this.props.scrollTop);
 		}
-	}
+	}, [scrollTop, title]);
+
+	useEffect(() => {
+		// make second element ref height same as first element ref height
+		if (firstElementRef.current && secondElementRef.current) {
+			secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`;
+		}
+	}, []);
+
+	const firstElementRef = useRef<HTMLDivElement>(null);
+	const secondElementRef = useRef<HTMLDivElement>(null);
+
+	return (
+		<div className={classes["root"]}>
+			<Header isUserConnected={showHeader} />
+			<div className={classes["content"]}>
+				<div className={classNames(classes["sides"], classes["side-left"])} ref={firstElementRef}>
+					{children}
+				</div>
+				{type === "image" && (
+					<div className={classNames(classes["sides"], classes["image-container"])} ref={secondElementRef}>
+						<Image alt={"right side image"} src={image} className={classes["image"]} />
+					</div>
+				)}
+				{type === "background" && (
+					<div className={classNames(classes["sides"], classes["background-image-container"])} ref={secondElementRef}>
+						<Image alt={"right side image"} src={image} className={classes["background-image"]} priority />
+					</div>
+				)}
+			</div>
+			<Version />
+		</div>
+	);
 }