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

firt

Browse Source
This commit is contained in:
Ladebeze66 2025-02-01 15:47:14 +00:00
parent c356a67055
commit 9cd6467cd9
1 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/layout.tsx
View File

@ -1,36 +1,38 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState, useRef } from "react";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import "./assets/main.css"; import "./assets/main.css";
import NavLink from "./components/NavLink"; import NavLink from "./components/NavLink";
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
// États pour gérer la largeur et la hauteur du conteneur principal // Référence pour observer la taille du conteneur
const [numElements, setNumElements] = useState(0); const containerRef = 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(() => {
// Compter le nombre d'éléments enfants const observer = new ResizeObserver((entries) => {
const elementsCount = React.Children.count(children); for (let entry of entries) {
setNumElements(elementsCount); const width = entry.contentRect.width;
if (width > 1400) {
setContainerWidth("max-w-full");
} else if (width > 1200) {
setContainerWidth("max-w-6xl");
} else if (width > 1000) {
setContainerWidth("max-w-5xl");
} else {
setContainerWidth("max-w-4xl");
}
}
});
// Ajuster la largeur et la hauteur en fonction du nombre d'éléments if (containerRef.current) {
if (elementsCount > 10) { observer.observe(containerRef.current);
setContainerWidth("max-w-full");
setContainerHeight("min-h-[90vh]");
} else if (elementsCount > 5) {
setContainerWidth("max-w-6xl");
setContainerHeight("min-h-[80vh]");
} else if (elementsCount > 3) {
setContainerWidth("max-w-5xl");
setContainerHeight("min-h-[70vh]");
} else {
setContainerWidth("max-w-4xl");
setContainerHeight("min-h-[60vh]");
} }
}, [children]); return () => observer.disconnect();
}, []);
return ( return (
<html lang="fr"> <html lang="fr">
@ -42,36 +44,36 @@ 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">
<h2 className="text-2xl font-bold">Portofolio Gras-Calvet Fernand</h2> <h2 className="text-2xl font-bold">Portofolio 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> <li><NavLink text="Accueil" path="/" /></li>
<NavLink text="Accueil" path="/" /> <li><NavLink text="Portfolio" path="/portfolio" /></li>
</li> <li><NavLink text="Compétences" path="/competences" /></li>
<li> <li><NavLink text="Contact" path="/contact" /></li>
<NavLink text="Portfolio" path="/portfolio" />
</li>
<li>
<NavLink text="Compétences" path="/competences" />
</li>
<li>
<NavLink text="Contact" path="/contact" />
</li>
</ul> </ul>
</nav> </nav>
</div> </div>
</header> </header>
{/* Conteneur principal pour le contenu */}
<main className={`backdrop-blur z-10 ${containerWidth} ${containerHeight} mx-auto bg-white/20 rounded-xl py-7 px-8 m-6 overflow-hidden`}> {/* Conteneur principal avec ajustement dynamique et scroll horizontal si nécessaire */}
{children} <div className="overflow-x-auto">
</main> <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>
</div>
{/* Pied de page */} {/* Pied de page */}
<Footer /> <Footer />
</div> </div>
</body> </body>
</html> </html>
); );
} }