Ladebeze66/devsite
1
0
Fork 0
mirror of https://github.com/Ladebeze66/devsite.git synced 2025-12-13 12:46:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

four

Browse Source
This commit is contained in:
Ladebeze66 2025-02-01 16:47:46 +00:00
parent ecde85d760
commit 72190c8245
1 changed files with 28 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/layout.tsx
View File

@ -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<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState("max-w-4xl");
const containerRef = useRef<HTMLDivElement>(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 (
<html lang="fr">
<body>
{/* Conteneur principal avec image de fond */}
<div className="bg-wallpaper min-h-[100dvh] grid grid-rows-[auto_1fr_auto]">
{/* Cercles de fond pour l'effet visuel */}
<div className="absolute z-0 inset-0 overflow-hidden">
<div className="circle-one blur-3xl w-64 h-64 rounded-full bg-rose-400/60 top-0 right-28 absolute"></div>
<div className="circle-two blur-3xl w-64 h-64 rounded-full bg-indigo-400/60 bottom-0 left-28 absolute"></div>
</div>
{/* En-tête avec navigation */}
<header className="z-10 bg-white/50 backdrop-blur rounded-lg border-2 border-gray-500">
<div className="max-w-4xl mx-auto flex items-center justify-between p-4">
<h2 className="text-2xl font-bold">Portofolio Gras-Calvet Fernand</h2>
<h2 className="text-2xl font-bold">Portfolio Gras-Calvet Fernand</h2>
<nav>
<ul className="flex gap-x-7 text-black-500 font-bold">
<li><NavLink text="Accueil" path="/" /></li>
@ -61,17 +61,12 @@ export default function RootLayout({ children }) {
</div>
</header>
{/* Conteneur principal ajusté dynamiquement */}
<div className="overflow-x-auto">
<main className={`backdrop-blur z-10 w-full ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6`}>
{/* 🎯 On observe ce div plutôt que main */}
<div ref={contentRef}>
{children}
</div>
<main ref={containerRef} className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 transition-all duration-300`}>
{children}
</main>
</div>
{/* Pied de page */}
<Footer />
</div>
</body>