Ladebeze66/devsite
1
0
Fork 0
mirror of https://github.com/Ladebeze66/devsite.git synced 2025-12-15 13:36: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"; import NavLink from "./components/NavLink";
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
// Références pour observer le contenu de main const containerRef = useRef<HTMLDivElement>(null);
const contentRef = useRef<HTMLDivElement>(null); const [containerWidth, setContainerWidth] = useState("w-full"); // ✅ Par défaut pleine largeur
const [containerWidth, setContainerWidth] = useState("max-w-4xl");
const [containerHeight, setContainerHeight] = useState("min-h-[50vh]"); const [containerHeight, setContainerHeight] = useState("min-h-[50vh]");
useEffect(() => { 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) => { const observer = new ResizeObserver((entries) => {
for (let entry of entries) { for (let entry of entries) {
const contentWidth = entry.contentRect.width; const contentHeight = entry.contentRect.height;
if (contentWidth > 1400) { if (contentHeight > 800) {
setContainerWidth("max-w-full"); setContainerHeight("min-h-[90vh]");
} else if (contentWidth > 1200) { } else if (contentHeight > 600) {
setContainerWidth("max-w-6xl"); setContainerHeight("min-h-[80vh]");
} else if (contentWidth > 1000) { } else if (contentHeight > 400) {
setContainerWidth("max-w-5xl"); setContainerHeight("min-h-[70vh]");
} else { } else {
setContainerWidth("max-w-4xl"); setContainerHeight("min-h-[50vh]");
} }
} }
}); });
if (contentRef.current) { observer.observe(containerRef.current);
observer.observe(contentRef.current);
}
return () => observer.disconnect(); return () => observer.disconnect();
}, [children]); // 🔄 Recalculer à chaque mise à jour des enfants }, [children]);
return ( return (
<html lang="fr"> <html lang="fr">
<body> <body>
{/* Conteneur principal avec image de fond */}
<div className="bg-wallpaper min-h-[100dvh] grid grid-rows-[auto_1fr_auto]"> <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"> <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"> <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> <nav>
<ul className="flex gap-x-7 text-black-500 font-bold"> <ul className="flex gap-x-7 text-black-500 font-bold">
<li><NavLink text="Accueil" path="/" /></li> <li><NavLink text="Accueil" path="/" /></li>
@ -61,17 +61,12 @@ export default function RootLayout({ children }) {
</div> </div>
</header> </header>
{/* Conteneur principal ajusté dynamiquement */}
<div className="overflow-x-auto"> <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`}> <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`}>
{/* 🎯 On observe ce div plutôt que main */} {children}
<div ref={contentRef}>
{children}
</div>
</main> </main>
</div> </div>
{/* Pied de page */}
<Footer /> <Footer />
</div> </div>
</body> </body>