diff --git a/app/layout.tsx b/app/layout.tsx index a4edd92..83037d2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,50 +6,50 @@ import "./assets/main.css"; import NavLink from "./components/NavLink"; export default function RootLayout({ children }) { - // Références pour observer le contenu de main - const contentRef = useRef(null); - const [containerWidth, setContainerWidth] = useState("max-w-4xl"); + const containerRef = useRef(null); + const [containerWidth, setContainerWidth] = useState("w-full"); // ✅ Par défaut pleine largeur const [containerHeight, setContainerHeight] = useState("min-h-[50vh]"); useEffect(() => { + if (!containerRef.current) return; + + const childCount = containerRef.current.children.length; // 📌 Compte le nombre d'enfants + + // 📌 Ajuster la largeur UNIQUEMENT si peu d'éléments + if (childCount <= 2) { + setContainerWidth("max-w-3xl"); // ✅ Rétrécir pour la home ou peu de contenu + } else { + setContainerWidth("w-full"); // ✅ Sinon pleine largeur + } + + // 📌 Ajuster la hauteur dynamiquement const observer = new ResizeObserver((entries) => { for (let entry of entries) { - const contentWidth = entry.contentRect.width; - - if (contentWidth > 1400) { - setContainerWidth("max-w-full"); - } else if (contentWidth > 1200) { - setContainerWidth("max-w-6xl"); - } else if (contentWidth > 1000) { - setContainerWidth("max-w-5xl"); + const contentHeight = entry.contentRect.height; + + if (contentHeight > 800) { + setContainerHeight("min-h-[90vh]"); + } else if (contentHeight > 600) { + setContainerHeight("min-h-[80vh]"); + } else if (contentHeight > 400) { + setContainerHeight("min-h-[70vh]"); } else { - setContainerWidth("max-w-4xl"); + setContainerHeight("min-h-[50vh]"); } } }); - if (contentRef.current) { - observer.observe(contentRef.current); - } - + observer.observe(containerRef.current); return () => observer.disconnect(); - }, [children]); // 🔄 Recalculer à chaque mise à jour des enfants + }, [children]); return ( - {/* Conteneur principal avec image de fond */}
- {/* Cercles de fond pour l'effet visuel */} -
-
-
-
- - {/* En-tête avec navigation */}
-

Portofolio Gras-Calvet Fernand

+

Portfolio Gras-Calvet Fernand

- {/* Conteneur principal ajusté dynamiquement */}
-
- {/* 🎯 On observe ce div plutôt que main */} -
- {children} -
+
+ {children}
- {/* Pied de page */}