108 lines
4.5 KiB
TypeScript
108 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useTheme } from "next-themes";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import Sidebar from "@/components/Sidebar";
|
|
|
|
export default function Header() {
|
|
const { resolvedTheme } = useTheme();
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
// Prevent hydration mismatch
|
|
if (!mounted) {
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent py-6">
|
|
<div className="w-full px-[50px] max-[375px]:px-[25px] flex items-center justify-between">
|
|
<Link href="/" className="flex items-center gap-3 group">
|
|
<div className="relative w-60 h-20 -left-[83px]">
|
|
<Image
|
|
src="/assets/images/white-logo.png"
|
|
alt="Sky and Soil Logo"
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
</Link>
|
|
<div className="flex items-center gap-4">
|
|
<button className="p-2 -mr-2 text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
const isLight = resolvedTheme === "light";
|
|
|
|
return (
|
|
<>
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
|
|
? "bg-white/25 dark:bg-black/25 backdrop-blur-md shadow-sm py-4"
|
|
: "bg-transparent py-6"
|
|
}`}
|
|
>
|
|
<div className="w-full px-[50px] max-[375px]:px-[25px] flex items-center justify-between">
|
|
<Link href="/" className="flex items-center gap-3 group">
|
|
<div className="relative w-60 h-20 transition-transform group-hover:scale-105 -left-[83px]">
|
|
<Image
|
|
src={(isScrolled && isLight) ? "/assets/images/blue-logo.png" : "/assets/images/white-logo.png"}
|
|
alt="Sky and Soil Logo"
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
{/* <span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
|
|
}`}>
|
|
Sky and Soil
|
|
</span> */}
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-4">
|
|
|
|
|
|
<button
|
|
className={`p-2 -mr-2 ${(isScrolled && isLight) ? "text-primary" : "text-white"}`}
|
|
onClick={() => setIsSidebarOpen(true)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
stroke="currentColor"
|
|
className="w-6 h-6"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
|
|
</>
|
|
);
|
|
} |