Enhance header component with scroll detection for improved UX; add new input field for search functionality, update styles for links, and adjust layout for responsiveness

app/globals.css

@@ -154,6 +154,13 @@ body {
   background-clip: text;
 }
 
+.text-parch-link:hover {
+  transition: 0.4s;
+  background: linear-gradient(90deg, #21c796 40%, #0385ce 85%, #0d40bf 120%);
+  color: transparent;
+  background-clip: text;
+}
+
 .text-blue-parch {
   color: #0d40bf;
 }

app/podcast/[id]/page.tsx

@@ -16,7 +16,7 @@ import Link from "next/link";
 export default function Podcast() {
   return (
     <main>
-      <section className="relative pt-24 pb-16 lg:pt-36 md:pb-24">
+      <section className="relative pt-24 pb-16 md:pt-36 md:pb-24">
         <div className="container">
           <div className="grid gap-6 grid-cols-3 lg:gap-12 mb-16">
             <div className="aspect-square overflow-hidden rounded-xl bg-muted">

components/header.tsx

@@ -1,47 +1,94 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Menu, Search } from "lucide-react";
+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";
 
 export default function Header() {
+  const [isScrollingUp, setIsScrollingUp] = useState(true); // Track scroll direction
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+
+  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 (
-    <div className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10">
+    <header className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10 md:px-6 py-3 px-2 md:p-4">
-      <header className="px-4 md:px-6 flex p-3 md:p-4 w-full shrink-0 items-center justify-between relative">
+      <div className="flex w-full shrink-0 items-center justify-between relative">
         {/* Left Section */}
-        <div className="flex gap-2">
+        <div className="flex sm:gap-2 gap-1">
-          <Button variant="ghost" className="px-2 py-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"}
+            className="md:hidden px-2 py-1"
+          >
             <Menu />
-            منو
-          </Button>
-          <Button variant="ghost" className="px-2 py-1">
-            <Search />
-            جستجو
           </Button>
           <ModeToggle />
           <ToggleLanguage />
         </div>
         <Link
           href={"/"}
-          className="absolute left-1/2 -translate-x-1/2 hidden sm:flex items-center"
+          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 variant="outline" className="px-2 py-1">
+          <Button variant="outline" className="bg-parch cursor-pointer">
-            ورود
+            <span className="md:block hidden">ورود | ثبت نام</span>
+            <LogIn className="md:hidden block" />
           </Button>
-          <Button className="px-2 py-1 bg-parch">مشترک شوید</Button>
         </div>
-      </header>
+      </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>
   );
 }

components/toggle-language.tsx

@@ -15,8 +15,8 @@ export default function ToggleLanguage() {
       <DropdownMenuTrigger asChild>
         <Button variant="outline" className="flex items-center gap-2">
           <GlobeIcon className="h-4 w-4" />
-          <span>فارسی</span>
+          <span className="md:block hidden">فارسی</span>
-          <ChevronDownIcon className="h-4 w-4" />
+          <ChevronDownIcon className="md:block hidden h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[180px]">

components/ui/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -15,7 +15,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };