120 lines
4.0 KiB
React
120 lines
4.0 KiB
React
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import { Badge, Button } from 'antd';
|
|
import { ShoppingCartOutlined, MenuOutlined, CloseOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { selectCartCount, openDrawer } from '@/store/cartSlice';
|
|
import { useLanguage } from '@/app/context/LanguageContext';
|
|
import ThemeToggle from './ThemeToggle';
|
|
import LanguageToggle from './LanguageToggle';
|
|
|
|
export default function Header() {
|
|
const dispatch = useDispatch();
|
|
const cartCount = useSelector(selectCartCount);
|
|
const { t } = useLanguage();
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
|
|
const navLinks = [
|
|
{ href: '#hero', label: t.nav.home },
|
|
{ href: '#showcase', label: t.nav.showcase },
|
|
{ href: '#about', label: t.nav.about },
|
|
{ href: '#catalog', label: t.nav.catalog },
|
|
{ href: '#locations', label: t.nav.locations },
|
|
{ href: '#video', label: t.nav.video },
|
|
{ href: '#map', label: t.nav.map },
|
|
{ href: '#support', label: t.nav.support },
|
|
];
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 24);
|
|
window.addEventListener('scroll', onScroll);
|
|
return () => window.removeEventListener('scroll', onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
|
|
scrolled ? 'bg-page-85 backdrop-blur-md shadow-[0_1px_0_0_rgba(0,166,147,0.25)]' : 'bg-transparent'
|
|
}`}
|
|
>
|
|
<div className="mx-auto max-w-7xl px-5 md:px-8 h-20 flex items-center justify-between gap-4">
|
|
<a href="#hero" className="flex items-center gap-2 shrink-0">
|
|
<Image src="/images/logo.svg" alt="روبات مارکت" width={150} height={42} priority />
|
|
</a>
|
|
|
|
<nav className="hidden lg:flex items-center gap-6 xl:gap-8">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm text-secondary hover:text-brand-300 transition-colors whitespace-nowrap"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-2 md:gap-3">
|
|
<div className="hidden md:flex items-center gap-2">
|
|
<LanguageToggle />
|
|
<ThemeToggle />
|
|
</div>
|
|
|
|
<Button
|
|
className="hidden sm:inline-flex"
|
|
icon={<UserOutlined />}
|
|
onClick={() => {
|
|
/* TODO: point this at the real customer panel login route */
|
|
}}
|
|
>
|
|
{t.nav.login}
|
|
</Button>
|
|
|
|
<Badge count={cartCount} size="small" offset={[-2, 2]}>
|
|
<Button
|
|
shape="circle"
|
|
size="large"
|
|
icon={<ShoppingCartOutlined />}
|
|
onClick={() => dispatch(openDrawer())}
|
|
aria-label="cart"
|
|
/>
|
|
</Badge>
|
|
|
|
<button
|
|
className="lg:hidden text-brand-400 text-2xl"
|
|
onClick={() => setMobileOpen((v) => !v)}
|
|
aria-label="menu"
|
|
>
|
|
{mobileOpen ? <CloseOutlined /> : <MenuOutlined />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{mobileOpen && (
|
|
<nav className="lg:hidden bg-elevated-95 backdrop-blur-md border-t border-subtle px-5 py-4 flex flex-col gap-4">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setMobileOpen(false)}
|
|
className="text-secondary text-base"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
<div className="flex items-center gap-3 pt-2 border-t border-subtle">
|
|
<LanguageToggle />
|
|
<ThemeToggle />
|
|
<Button icon={<UserOutlined />} className="flex-1">
|
|
{t.nav.login}
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|