fixed the scroll behavior in the header

2026-04-15 12:21:31 +02:00
parent e77fb4a1f2
commit bc83366c9e
5 changed files with 111 additions and 17 deletions
@@ -1,7 +1,10 @@
 import type { Metadata } from "next";
 import { Playfair_Display, Inter } from "next/font/google";
+
 import "./globals.css";
+
 import Header from "@/components/layout/Header";
+import CustomScrollArea from "@/components/layout/CustomScrollArea";

 const playfairDisplay = Playfair_Display({
 	variable: "--font-playfair",
@@ -24,10 +27,21 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige m-2.75 overflow-auto antialiased`}>
-			<body className="min-h-screen flex flex-col bg-brand-beige text-brand-brown">
-				<Header />
-				{children}
+		<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige overflow-hidden antialiased`}>
+			
+			<body className="h-screen w-screen bg-brand-beige text-brand-brown flex flex-col overflow-hidden">
+				<div className="sticky top-0 z-50 bg-brand-beige w-full px-2.75 pt-2.75">
+					<Header />
+				</div>
+				{/* Scrolling bloc */}
+				<CustomScrollArea>
+					
+					
+					<main className="px-2.75 pb-2.75">
+						{children}
+					</main>
+				</CustomScrollArea>
+
 			</body>
 		</html>
 	);