web/src/app/(root)/@header/page.tsx

'use client'
import {useCallback, useEffect, useMemo, useState} from 'react'
import Link from 'next/link'
import Image from 'next/image'
import {LinkItem, MenuItem} from './_server/navs'
import SolutionMenu from './_client/solution'
import ProductMenu from './_client/product'
import HelpMenu from './_client/help'
import Wrap from '@/components/wrap'
import logo from '@/assets/logo.webp'

export type HeaderProps = {}

export default function Header(props: HeaderProps) {

  // ======================
  // 滚动条状态
  // ======================

  const [scroll, setScroll] = useState(false) // Changed to false for client-side rendering

  const handleScroll = useCallback(() => {
    setScroll(window.scrollY > 48)
  }, [])

  useEffect(() => {
    // Initialize scroll state on client
    setScroll(window.scrollY > 48)
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [handleScroll])

  // ======================
  // 菜单状态
  // ======================

  const [menu, setMenu] = useState(false)
  const [page, setPage] = useState(0)
  const pages = useMemo(() => [
    <ProductMenu key={`product`}/>,
    <SolutionMenu key={`solution`}/>,
    <HelpMenu key={`help`}/>,
  ], [])

  // ======================
  // 渲染组件
  // ======================

  return (
    <header className={[
      `fixed top-0 w-full z-10`,
    ].join(' ')}>
      <div className={[
        `transition-[background, shadow] duration-200 ease-in-out`,
        menu
          ? `bg-[#fffe] backdrop-blur-sm`
          : scroll
            ? `bg-[#fffe] backdrop-blur-sm shadow-lg`
            : `bg-transparent shadow-none`,
      ].join(' ')}>
        <Wrap className="h-20 max-md:h-16 flex justify-between">
          <div className="flex justify-between gap-8">
            {/* logo */}
            <Link href="/public" className={`flex items-center`}>
              <Image src={logo} alt={`logo`} className={`w-16 max-md:w-12 h-16 max-md:h-12 rounded-full`}/>
            </Link>

            {/* 菜单 */}
            <nav>
              <ul className="h-full flex items-stretch max-lg:hidden">
                <LinkItem text={`首页`} href={`/`}/>
                <MenuItem
                  text={`产品订购`}
                  active={menu && page === 0}
                  onEnter={() => {
                    setMenu(true)
                    setPage(0)
                  }}
                  onLeave={() => {
                    return setMenu(false)
                  }}
                />
                <MenuItem
                  text={`业务场景`}
                  active={menu && page === 1}
                  onEnter={() => {
                    setMenu(true)
                    setPage(1)
                  }}
                  onLeave={() => {
                    return setMenu(false)
                  }}
                />
                <MenuItem
                  text={`帮助中心`}
                  active={menu && page === 2}
                  onEnter={() => {
                    setMenu(true)
                    setPage(2)
                  }}
                  onLeave={() => {
                    return setMenu(false)
                  }}
                />
                <LinkItem
                  text={`企业服务`} href={`#`}/>
                <LinkItem
                  text={`推广返利`} href={`#`}/>
              </ul>
            </nav>
          </div>
          {/* 登录 */}
          <div className={`flex items-center`}>
            <Link
              href="/login"
              className={`w-24 h-12 flex items-center justify-center lg:text-lg`}
            >
              <span>登录</span>
            </Link>
            <Link
              href="/login"
              className={[
                `w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r  rounded-sm flex items-center justify-center lg:text-lg text-white`,
                `transition-colors duration-200 ease-in-out`,
                `from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
              ].join(' ')}
            >
              <span>注册</span>
            </Link>
          </div>
        </Wrap>
      </div>

      {/* 下拉菜单 */}
      <div
        className={[
          `shadow-lg`,
          `overflow-hidden bg-[#fffe] backdrop-blur-sm`,
          `transition-[opacity,padding,height] transition-discrete duration-200 ease-in-out`,
          menu
            ? `delay-[0s,0s,0s] opacity-100 py-8 h-auto`
            : `delay-[0s,0s,0.2s] opacity-0 py-0 h-0`,
        ].join(' ')}
        onPointerEnter={() => setMenu(true)}
        onPointerLeave={() => setMenu(false)}
      >
        {pages[page]}
      </div>
    </header>
  )
}