90 lines
2.6 KiB
TypeScript
90 lines
2.6 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 { Separator } from "@radix-ui/react-separator";
|
|
import { ModeToggle } from "./mode-toggle";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
navigationMenuTriggerStyle,
|
|
} from "@/components/ui/navigation-menu";
|
|
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-opacity duration-500 mr-4 ease-in-out ${
|
|
isVisible ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
sizes="40px"
|
|
priority
|
|
/>
|
|
|
|
<Link href="/" className="text-lg font-bold">
|
|
portfolio
|
|
</Link>
|
|
|
|
<MyNavigationMenu />
|
|
<div className="flex-grow" />
|
|
<ThemeSwitcher />
|
|
</div>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|