"use client"; 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 }) { // Références pour observer le contenu de main const contentRef = useRef(null); const [containerWidth, setContainerWidth] = useState("max-w-4xl"); const [containerHeight, setContainerHeight] = useState("min-h-[50vh]"); useEffect(() => { 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"); } else { setContainerWidth("max-w-4xl"); } } }); if (contentRef.current) { observer.observe(contentRef.current); } return () => observer.disconnect(); }, [children]); // 🔄 Recalculer à chaque mise à jour des enfants return ( {/* Conteneur principal avec image de fond */}

{/* Cercles de fond pour l'effet visuel */}

{/* En-tête avec navigation */}

Portofolio Gras-Calvet Fernand

{/* Conteneur principal ajusté dynamiquement */}

{/* 🎯 On observe ce div plutôt que main */}

{children}

{/* Pied de page */}

); }