60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export function Header() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const pathname = usePathname();
|
|
if (pathname === "/connect") return null;
|
|
const isMainPage = pathname === "/";
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
if (window.scrollY > 100) {
|
|
setIsVisible(true);
|
|
} else {
|
|
setIsVisible(false);
|
|
}
|
|
};
|
|
|
|
if (isMainPage) {
|
|
window.addEventListener("scroll", handleScroll);
|
|
handleScroll();
|
|
} else {
|
|
setIsVisible(true);
|
|
}
|
|
|
|
return () => {
|
|
if (isMainPage) {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
}
|
|
};
|
|
}, [isMainPage]);
|
|
|
|
if (!isVisible && isMainPage) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 right-0 z-50">
|
|
<header className="max-w-2xl mx-auto bg-background/80 backdrop-blur-sm shadow-sm animate-in fade-in slide-in-from-top-4 duration-500">
|
|
<div className="flex justify-between items-center p-4">
|
|
<Link href="/" className="text-lg font-bold">
|
|
portfolio
|
|
</Link>
|
|
<Image
|
|
src="/images/newshot_2.jpg"
|
|
alt="User's headshot"
|
|
width={40}
|
|
height={40}
|
|
className="rounded-full"
|
|
/>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|