import { useRef, useState, useSyncExternalStore } from "react"
import { NavLink } from "react-router-dom"
import ProductDropdown from "@/components/productDropdown"
import ProfileOrLogin from "@/components/profileOrLogin"
import Wrap from "@/components/wrap"
import { cn } from "@/lib/utils"
export default function Header() {
const scroll = useSyncExternalStore(
callback => {
window.addEventListener("scroll", callback)
return () => {
window.removeEventListener("scroll", callback)
}
},
() => window.scrollY > 48,
() => false,
)
// ======================
// 菜单状态
// ======================
const [openMenu, setOpenMenu] = useState(false)
const handleEnter = () => setOpenMenu(true)
const handleLeave = () => setOpenMenu(false)
return (
)
}
const NavItem = ({
to,
children,
}: {
to: string
children: React.ReactNode
}) => (
{children}
)
const MenuItem = ({
text,
children,
isOpen,
onMouseEnter,
onMouseLeave,
}: {
text: string
children: React.ReactNode
isOpen: boolean
onMouseEnter: () => void
onMouseLeave: () => void
}) => {
const timeoutRef = useRef(null)
const handleMouseEnter = () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
timeoutRef.current = null
}
onMouseEnter()
}
const handleMouseLeave = () => {
timeoutRef.current = setTimeout(() => {
onMouseLeave()
}, 150)
}
return (
)
}