From 7533d3892962db09f6aef0b51dcc9b0ef455f7da Mon Sep 17 00:00:00 2001 From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com> Date: Wed, 28 May 2025 05:39:58 +0000 Subject: [PATCH 1/4] feat: implement sticky navigation bar on scroll - Add scroll detection using React hooks - Navigation becomes fixed position when scrolling down - Semi-transparent background with backdrop blur - Smooth transition animations - Maintains clean design principles Fixes #4 Co-authored-by: ivanleomk --- src/components/Navigation.tsx | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 31b995f..e4f2a9e 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -1,7 +1,27 @@ "use client"; +import { useEffect, useState } from "react"; + export function Navigation() { + const [isScrolled, setIsScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const scrollTop = window.scrollY; + setIsScrolled(scrollTop > 0); + }; + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + return ( -