104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
"use client";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import { LogIn, Menu, Search } from "lucide-react";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { useEffect, useState } from "react";
|
||
import { ModeToggle } from "./mode-toggle";
|
||
import ToggleLanguage from "./toggle-language";
|
||
import { Input } from "./ui/input";
|
||
import { useSidebar } from "./ui/sidebar";
|
||
|
||
export default function Header() {
|
||
const [isScrollingUp, setIsScrollingUp] = useState(true); // Track scroll direction
|
||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||
const { toggleSidebar } = useSidebar();
|
||
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
const currentScrollPos = window.scrollY;
|
||
|
||
// Determine scroll direction
|
||
if (currentScrollPos < prevScrollPos) {
|
||
setIsScrollingUp(true); // Scrolling up
|
||
} else {
|
||
setIsScrollingUp(false); // Scrolling down
|
||
}
|
||
|
||
// Update previous scroll position
|
||
setPrevScrollPos(currentScrollPos);
|
||
};
|
||
|
||
// Attach scroll event listener
|
||
window.addEventListener("scroll", handleScroll);
|
||
|
||
// Cleanup listener on unmount
|
||
return () => window.removeEventListener("scroll", handleScroll);
|
||
}, [prevScrollPos]);
|
||
|
||
return (
|
||
<header className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-[5] md:px-6 py-3 px-2 md:p-4">
|
||
<div className="flex w-full shrink-0 items-center justify-between relative">
|
||
{/* Left Section */}
|
||
<div className="flex sm:gap-2 gap-1">
|
||
<div className="md:block hidden relative lg:w-[250px] sm:w-[120px]">
|
||
<Input className="pr-9 bg-background" placeholder="جستجو..." />
|
||
<Search className="absolute right-0 top-0 m-2.5 h-4 w-4 text-muted-foreground" />
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size={"icon"}
|
||
onClick={toggleSidebar}
|
||
className="md:hidden px-2 py-1 cursor-pointer"
|
||
>
|
||
<Menu />
|
||
</Button>
|
||
<div className="md:flex hidden sm:gap-2 gap-1">
|
||
<ModeToggle />
|
||
<ToggleLanguage />
|
||
</div>
|
||
</div>
|
||
<Link
|
||
href={"/"}
|
||
className="absolute left-1/2 -translate-x-1/2 flex items-center"
|
||
>
|
||
<Image src={"/logo.png"} width={30} height={30} alt="logo" />
|
||
<h1 className="font-bold tracking-tighter leading-normal pe-2 text-xl text-parch">
|
||
پارچ کست
|
||
</h1>
|
||
</Link>
|
||
{/* Right Section */}
|
||
<div className="flex gap-2">
|
||
<Button className="md:block hidden bg-parch text-white cursor-pointer">
|
||
<span>ورود | ثبت نام</span>
|
||
</Button>
|
||
<Button
|
||
className="md:hidden block bg-parch text-white cursor-pointer"
|
||
size={"sm"}
|
||
>
|
||
<LogIn className="block" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={`md:flex hidden w-full shrink-0 items-center gap-8 mt-4 justify-center transition-all duration-300 ${
|
||
isScrollingUp ? "opacity-100 h-auto" : "opacity-0 h-0 overflow-hidden"
|
||
}`}
|
||
>
|
||
<Link href={"/"} className="text-parch-link">
|
||
حمایت از پادکست
|
||
</Link>
|
||
<Link href={"/"} className="text-parch-link">
|
||
همکاری با اسپانسر
|
||
</Link>{" "}
|
||
<Link href={"/"} className="text-parch-link">
|
||
تماس با ما
|
||
</Link>{" "}
|
||
<Link href={"/"} className="text-parch-link">
|
||
درباره ما
|
||
</Link>{" "}
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|