55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { LiveSearch } from '../components/store/LiveSearch';
|
|
import { HeaderActions } from './HeaderActions';
|
|
|
|
/** Shared sticky threshold for Header + Navbar so they lock together. */
|
|
export const STOREFRONT_STICKY_SCROLL_Y = 10;
|
|
|
|
/** White gap between the sticky header and nav after scroll. */
|
|
export const STOREFRONT_STICKY_NAV_GAP_PX = 10;
|
|
|
|
export const Header: React.FC = () => {
|
|
const [isSticky, setIsSticky] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () =>
|
|
setIsSticky(window.scrollY > STOREFRONT_STICKY_SCROLL_Y);
|
|
onScroll();
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
data-storefront-header
|
|
className={`bg-white z-[110] border-b border-gray-100 transition-shadow duration-200 ${
|
|
isSticky
|
|
? 'fixed top-0 left-0 right-0 shadow-md py-2.5'
|
|
: 'relative pt-6 pb-4 shadow-2xs'
|
|
}`}
|
|
>
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-5 relative">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center select-none tracking-tighter hover:opacity-95 transition-opacity"
|
|
>
|
|
<span className="text-[#0073EC] text-[38px] font-black leading-none">
|
|
iFix
|
|
</span>
|
|
<span className="text-gray-900 text-[38px] font-black leading-none">
|
|
Kart
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="hidden lg:block flex-grow max-w-[660px] mx-2 xl:mx-6 relative z-50">
|
|
<LiveSearch />
|
|
</div>
|
|
|
|
<HeaderActions />
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|