85 lines
2.5 KiB
TypeScript
85 lines
2.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";
|
|
import { MyNavigationMenu } from "./element-navigation-menu";
|
|
import { ThemeSwitcher } from "./theme-switch";
|
|
|
|
export function Header() {
|
|
// This state now controls the visibility of the image, not the whole header.
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const pathname = usePathname();
|
|
const isMainPage = pathname === "/";
|
|
|
|
useEffect(() => {
|
|
// The logic to determine visibility based on scroll or page is still correct.
|
|
if (pathname === "/connect") return;
|
|
|
|
const handleScroll = () => {
|
|
if (window.scrollY > 140) {
|
|
setIsVisible(true);
|
|
} else {
|
|
setIsVisible(false);
|
|
}
|
|
};
|
|
|
|
if (isMainPage) {
|
|
window.addEventListener("scroll", handleScroll);
|
|
// Run on mount to set the initial state correctly
|
|
handleScroll();
|
|
} else {
|
|
// On other pages, the image should be visible by default.
|
|
setIsVisible(true);
|
|
}
|
|
|
|
return () => {
|
|
if (isMainPage) {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
}
|
|
};
|
|
}, [isMainPage, pathname]);
|
|
|
|
// We only want to hide the entire component on the /connect page.
|
|
if (pathname === "/connect") {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed top-4 left-0 right-0 z-50">
|
|
<header className="max-w-2xl mx-auto bg-background/80 rounded-xl backdrop-blur-sm shadow-sm cards">
|
|
<div className="flex items-center p-4">
|
|
<Image
|
|
src="/images/newshot_2.jpg"
|
|
alt="User's headshot"
|
|
width={40}
|
|
height={40}
|
|
// Dynamically apply classes for the fade effect
|
|
className={`
|
|
rounded-full
|
|
transition-all duration-250
|
|
|
|
// Conditional sizing and spacing based on isVisible state
|
|
${
|
|
isVisible
|
|
? "w-10 h-10 opacity-100 mr-4" // Visible state: Full size (w-10 is 40px)
|
|
: "w-0 h-0 opacity-0 mr-0" // Hidden state: Zero size, zero margin
|
|
}
|
|
`}
|
|
sizes="40px"
|
|
priority
|
|
/>
|
|
|
|
<Link href="/" className="text-lg font-bold">
|
|
portfolio
|
|
</Link>
|
|
|
|
<MyNavigationMenu />
|
|
<div className="flex-grow" />
|
|
<ThemeSwitcher />
|
|
</div>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|