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
@@ -17,3 +17,22 @@ body {
  background-color: var(--background);
  color: var(--foreground);
 }
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  width: 0px;
+  background: transparent;
+}
+
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
@@ -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>
 	);
@@ -2,7 +2,7 @@ import HeroSection from "@/components/sections/HeroSection";

 export default function Home() {
 	return (
-		<main className=" bg-brand-beige text-brand-black flex items-center justify-center">
+		<main className=" bg-brand-beige text-brand-black flex flex-col items-center justify-center">
 			<HeroSection />
 		</main>
 	);
@@ -0,0 +1,58 @@
+"use client";
+
+import { useRef, useState, UIEvent, useEffect } from "react";
+
+export default function CustomScrollArea({ children }: { children: React.ReactNode }) {
+    // Scroll indicator size (default 20)
+    const thumbHeight = 20;
+
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const [scrollProgress, setScrollProgress] = useState(0);
+    const [needsScroll, setNeedsScroll] = useState(true);
+
+    const handleScroll = (e: UIEvent<HTMLDivElement>) => {
+        const target = e.currentTarget;
+        const maxScroll = target.scrollHeight - target.clientHeight;
+        
+        if (maxScroll > 0) {
+            // 0 : top, 1 : bottom
+            setScrollProgress(target.scrollTop / maxScroll);
+        }
+    };
+
+    // Check if content is larger than screen on load
+    useEffect(() => {
+        if (scrollRef.current) {
+            setNeedsScroll(scrollRef.current.scrollHeight > scrollRef.current.clientHeight);
+        }
+    }, []);
+
+    return (
+        <div className="flex-1 relative flex w-full overflow-hidden bg-brand-beige">
+            
+            {/* Scroll area */}
+            <div
+                ref={scrollRef}
+                onScroll={handleScroll}
+                // Tailwind V4: hide the scrollbar on Chrome, Safari and Firefox
+                className="flex-1 overflow-y-auto w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+            >
+                {children}
+            </div>
+
+            {/* Custom scrollbar */}
+            {needsScroll && (
+                <div className="absolute right-0 top-0 bottom-0 w-2.5 z-100 pointer-events-none">
+                    <div
+                        className="absolute w-full bg-brand-brown/20 rounded-full transition-all duration-75 ease-out"
+                        style={{
+                            height: `${thumbHeight}%`,
+                            top: `${scrollProgress * (100 - thumbHeight)}%`
+                        }}
+                    />
+                </div>
+            )}
+            
+        </div>
+    );
+}
@@ -1,16 +1,19 @@
 export default function Header() {
  return (
-    <header className="bg-brand-brown text-brand-beige py-6 px-10 flex justify-between items-center rounded-[10px] fixed left-2.75 right-2.75 z-50">
-        <div className="font-serif text-2xl font-light">M. Guilbert</div>
-        <nav>
-            <ul className="flex gap-8 font-sans text-base font-light">
-                <li>Accueil</li>
-                <li>Projets</li>
-                <li>À propos</li>
-                <li>Blog</li>
-            </ul>
-        </nav>
-        <div className="font-sans text-base font-light">France</div>
-    </header>
+	<div className="bg-brand-beige min-h-fit fixed left-2.75 right-2.75 z-50 rounded-b-[20px]">
+		<header className="bg-brand-brown text-brand-beige py-6 px-10 flex justify-between items-center rounded-[10px]">
+			<div className="font-serif text-2xl font-light">M. Guilbert</div>
+			<nav>
+				<ul className="flex gap-8 font-sans text-base font-light">
+					<li>Accueil</li>
+					<li>Projets</li>
+					<li>À propos</li>
+					<li>Blog</li>
+				</ul>
+			</nav>
+			<div className="font-sans text-base font-light">France</div>
+		</header>
+	</div>
+    
  );
 }