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
@@ -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>
+    
  );
 }