93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
import Logo from "./Logo";
|
|
import Menu from "./Menu";
|
|
import Search from "./Search";
|
|
import Cart from "./Cart";
|
|
import Account from "./Account";
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
export default function Header() {
|
|
const pathname = usePathname()
|
|
const isHome = pathname === '/';
|
|
|
|
const [isSticky, setIsSticky] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const scrollTop = isHome ? 800 : 400;
|
|
const onScroll = () => {
|
|
setIsSticky(window.scrollY > scrollTop);
|
|
};
|
|
|
|
window.addEventListener('scroll', onScroll);
|
|
return () => window.removeEventListener('scroll', onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className={`global-header-container py-5 ${isSticky ? 'is-fixed' : ''} ${isHome && !isSticky ? 'header-homepage' : ''}`}>
|
|
<div className="container flex items-center justify-between gap-5 relative">
|
|
<div className="header-left-group w-[205px]">
|
|
<Logo />
|
|
</div>
|
|
|
|
<div className="header-middle-group w-[583px] flex items-center justify-between gap-2">
|
|
<Menu />
|
|
|
|
<Search />
|
|
</div>
|
|
|
|
<div className="header-right-group relative flex items-center justify-between gap-4 w-[420px] text-white leading-[18px] font-500">
|
|
<a href="#fancybox-headphone" className="flex items-center gap-2" data-fancybox>
|
|
<i className="icons icon-headphone"></i>
|
|
<span className="text"> Hotline<br/> Mua Hàng </span>
|
|
</a>
|
|
|
|
<a href="/he-thong-cua-hang" className="flex items-center gap-2">
|
|
<i className="icons icon-showroom"></i>
|
|
<span className="text"> Hệ thống<br/> Showroom </span>
|
|
</a>
|
|
|
|
<Cart />
|
|
|
|
<Account />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white shadow-[0px_4px_20px_0px_#004AA11A] text-16 font-500 mb-5">
|
|
<div className="container flex items-center justify-between leading-[20px] py-[17px]">
|
|
<a href="/buildpc" className="flex items-center gap-2 hover:text-[#0678DB]">
|
|
<i className="icons icon-buildpc"></i>
|
|
<span> Xây Dựng Cấu Hình </span>
|
|
</a>
|
|
|
|
<a href="/designer-tool" className="flex items-center gap-2 hover:text-[#0678DB]">
|
|
<i className="icons icon-tool"></i>
|
|
<span> PC Đồ Họa Tool </span>
|
|
</a>
|
|
|
|
<a href="/tin-khuyen-mai" className="flex items-center gap-2 hover:text-[#0678DB]">
|
|
<i className="icons icon-promotion"></i>
|
|
<span> Chương Trình Khuyến Mãi </span>
|
|
</a>
|
|
|
|
<a href="/tin-tuc" className="flex items-center gap-2 hover:text-[#0678DB]">
|
|
<i className="icons icon-news"></i>
|
|
<span> Tin Tức Công Nghệ </span>
|
|
</a>
|
|
|
|
<a href="/chinh-sach-bao-hanh" className="flex items-center gap-2 hover:text-[#0678DB]">
|
|
<i className="icons icon-warranty"></i>
|
|
<span> Bảo Hành Tận Nhà </span>
|
|
</a>
|
|
|
|
<a href="#fancybox-feedback" data-fancybox="" className="flex items-center gap-2 hover:text-[#0678DB]">
|
|
<i className="icons icon-feedback"></i>
|
|
<span> Feedback </span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
} |