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

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"; import NavLink from "./components/NavLink";
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
// Référence pour observer la taille du conteneur // Références pour observer le contenu de main
const containerRef = useRef<HTMLDivElement>(null); const contentRef = useRef<HTMLDivElement>(null);
const [containerWidth, setContainerWidth] = useState("max-w-4xl"); const [containerWidth, setContainerWidth] = useState("max-w-4xl");
const [containerHeight, setContainerHeight] = useState("min-h-[50vh]"); const [containerHeight, setContainerHeight] = useState("min-h-[50vh]");
useEffect(() => { useEffect(() => {
const observer = new ResizeObserver((entries) => { const observer = new ResizeObserver((entries) => {
for (let entry of 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"); setContainerWidth("max-w-full");
} else if (width > 1200) { } else if (contentWidth > 1200) {
setContainerWidth("max-w-6xl"); setContainerWidth("max-w-6xl");
} else if (width > 1000) { } else if (contentWidth > 1000) {
setContainerWidth("max-w-5xl"); setContainerWidth("max-w-5xl");
} else { } else {
setContainerWidth("max-w-4xl"); setContainerWidth("max-w-4xl");
@ -28,11 +28,12 @@ export default function RootLayout({ children }) {
} }
}); });
if (containerRef.current) { if (contentRef.current) {
observer.observe(containerRef.current); observer.observe(contentRef.current);
} }
return () => observer.disconnect(); return () => observer.disconnect();
}, []); }, [children]); // 🔄 Recalculer à chaque mise à jour des enfants
return ( return (
<html lang="fr"> <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-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 className="circle-two blur-3xl w-64 h-64 rounded-full bg-indigo-400/60 bottom-0 left-28 absolute"></div>
</div> </div>
{/* En-tête avec navigation */} {/* 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">
@ -60,13 +61,13 @@ export default function RootLayout({ children }) {
</div> </div>
</header> </header>
{/* Conteneur principal avec ajustement dynamique et scroll horizontal si nécessaire */} {/* Conteneur principal ajusté dynamiquement */}
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<main <main className={`backdrop-blur z-10 w-full ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6`}>
ref={containerRef} {/* 🎯 On observe ce div plutôt que main */}
className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6`} <div ref={contentRef}>
> {children}
{children} </div>
</main> </main>
</div> </div>

2
app/portfolio/page.jsx
View File

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