From 9cd6467cd92b412c5941cbab9846d3a0c5afe76d Mon Sep 17 00:00:00 2001 From: Ladebeze66 Date: Sat, 1 Feb 2025 15:47:14 +0000 Subject: [PATCH] firt --- app/layout.tsx | 76 ++++++++++++++++++++++++++------------------------ 1 file changed, 39 insertions(+), 37 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 76e2f1a..1405ff5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,36 +1,38 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import Footer from "./components/Footer"; import "./assets/main.css"; import NavLink from "./components/NavLink"; export default function RootLayout({ children }) { - // États pour gérer la largeur et la hauteur du conteneur principal - const [numElements, setNumElements] = useState(0); + // Référence pour observer la taille du conteneur + const containerRef = useRef(null); const [containerWidth, setContainerWidth] = useState("max-w-4xl"); const [containerHeight, setContainerHeight] = useState("min-h-[50vh]"); useEffect(() => { - // Compter le nombre d'éléments enfants - const elementsCount = React.Children.count(children); - setNumElements(elementsCount); + const observer = new ResizeObserver((entries) => { + for (let entry of entries) { + const width = entry.contentRect.width; + + if (width > 1400) { + setContainerWidth("max-w-full"); + } else if (width > 1200) { + setContainerWidth("max-w-6xl"); + } else if (width > 1000) { + setContainerWidth("max-w-5xl"); + } else { + setContainerWidth("max-w-4xl"); + } + } + }); - // Ajuster la largeur et la hauteur en fonction du nombre d'éléments - if (elementsCount > 10) { - setContainerWidth("max-w-full"); - setContainerHeight("min-h-[90vh]"); - } else if (elementsCount > 5) { - setContainerWidth("max-w-6xl"); - setContainerHeight("min-h-[80vh]"); - } else if (elementsCount > 3) { - setContainerWidth("max-w-5xl"); - setContainerHeight("min-h-[70vh]"); - } else { - setContainerWidth("max-w-4xl"); - setContainerHeight("min-h-[60vh]"); + if (containerRef.current) { + observer.observe(containerRef.current); } - }, [children]); + return () => observer.disconnect(); + }, []); return ( @@ -42,36 +44,36 @@ export default function RootLayout({ children }) {
+ {/* En-tête avec navigation */}

Portofolio Gras-Calvet Fernand

- {/* Conteneur principal pour le contenu */} -
- {children} -
+ + {/* Conteneur principal avec ajustement dynamique et scroll horizontal si nécessaire */} +
+
+ {children} +
+
+ {/* Pied de page */}