4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 15:04:01 +02:00
commit 87caeea782
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
View File

@ -3,10 +3,10 @@
.root {
.content {
display: flex;
.sides {
min-height: calc(100vh - 83px);
flex: 1;
height: fit-content;
width: 50%;
@media (max-width: $screen-m) {
width: 100%;
}

18
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
View File

@ -5,6 +5,7 @@ import Image, { StaticImageData } from "next/image";
import React, { ReactNode, useEffect, useRef } from "react";
import classes from "./classes.module.scss";
import { useWindowSize } from "@uidotdev/usehooks";
type IProps = {
title: string;
@ -30,9 +31,22 @@ export default function DefaultDoubleSidePage(props: IProps) {
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 resizeObserver = new ResizeObserver(() => {
if (secondElementRef.current && firstElementRef.current) {
console.log("Recalculate");
if (secondElementRef.current.clientHeight !== 0) {
secondElementRef.current.style.height = `0px`;
}
secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`;
}
});
if (firstElementRef.current) {
resizeObserver.observe(firstElementRef.current);
}
return () => resizeObserver.disconnect();
}, []);
const firstElementRef = useRef<HTMLDivElement>(null);