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

two

Browse Source
This commit is contained in:
Ladebeze66 2025-02-01 16:24:20 +00:00
parent 9cd6467cd9
commit 2c1869dcd7
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/layout.tsx
View File

@ -6,21 +6,21 @@ import "./assets/main.css";
import NavLink from "./components/NavLink";
export default function RootLayout({ children }) {
// Référence pour observer la taille du conteneur
const containerRef = useRef<HTMLDivElement>(null);
// Références pour observer le contenu de main
const contentRef = useRef<HTMLDivElement>(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 width = entry.contentRect.width;
const contentWidth = entry.contentRect.width;
if (width > 1400) {
if (contentWidth > 1400) {
setContainerWidth("max-w-full");
} else if (width > 1200) {
} else if (contentWidth > 1200) {
setContainerWidth("max-w-6xl");
} else if (width > 1000) {
} else if (contentWidth > 1000) {
setContainerWidth("max-w-5xl");
} else {
setContainerWidth("max-w-4xl");
@ -28,11 +28,12 @@ export default function RootLayout({ children }) {
}
});
if (containerRef.current) {
observer.observe(containerRef.current);
if (contentRef.current) {
observer.observe(contentRef.current);
}
return () => observer.disconnect();
}, []);
}, [children]); // 🔄 Recalculer à chaque mise à jour des enfants
return (
<html lang="fr">
@ -44,7 +45,7 @@ export default function RootLayout({ children }) {
<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">
@ -60,13 +61,13 @@ export default function RootLayout({ children }) {
</div>
</header>
{/* Conteneur principal avec ajustement dynamique et scroll horizontal si nécessaire */}
{/* Conteneur principal ajusté dynamiquement */}
<div className="overflow-x-auto">
<main
ref={containerRef}
className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6`}
>
{children}
<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>
</div>

2
app/portfolio/page.jsx
View File

@ -30,7 +30,7 @@ export default async function Page() {
}
return (
<div className={`large-container mx-auto p-6 ${containerWidth}`}>
<div className={`mx-auto p-6 ${containerWidth}`}>
{/* Titre de la page */}
<h1 className="text-3xl mb-6 font-bold text-grey-700">Portfolio formation 42</h1>