143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
// Header.tsx
|
|
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { X, Search } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import Logo from "@/public/logo.png";
|
|
import CategoryMenu from "./ui/CategoryMenu";
|
|
import SearchBar from "./ui/SearchBar";
|
|
import AuthDialog from "./ui/AuthDialog";
|
|
import ActionButtons from "./ui/ActionButtons";
|
|
import LanguageSelector from "./ui/LanguageSelector";
|
|
import MobileBottomNav from "./MobileBar";
|
|
import { useAuthStatus } from "@/lib/hooks/useAuth";
|
|
import { useTranslations } from "next-intl";
|
|
import { CategoryIcon } from "../icons";
|
|
|
|
interface HeaderProps {
|
|
locale?: string;
|
|
}
|
|
|
|
export default function Header({ locale = "ru" }: HeaderProps) {
|
|
const [isClient, setIsClient] = useState(false);
|
|
const [isCategoryOpen, setIsCategoryOpen] = useState(false);
|
|
const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
|
|
const [isLoginOpen, setIsLoginOpen] = useState(false);
|
|
const t = useTranslations();
|
|
|
|
const { isAuthenticated } = useAuthStatus();
|
|
|
|
useEffect(() => {
|
|
setIsClient(true);
|
|
}, []);
|
|
|
|
const handleAuthClick = useCallback(() => {
|
|
if (isAuthenticated) {
|
|
window.location.href = `/${locale}/me`;
|
|
} else {
|
|
setIsLoginOpen(true);
|
|
}
|
|
}, [isAuthenticated, locale]);
|
|
|
|
const toggleCategoryMenu = useCallback(() => {
|
|
setIsCategoryOpen((prev) => !prev);
|
|
}, []);
|
|
|
|
const closeCategoryMenu = useCallback(() => {
|
|
setIsCategoryOpen(false);
|
|
}, []);
|
|
|
|
if (!isClient) return null;
|
|
|
|
return (
|
|
<>
|
|
<header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/95 backdrop-blur-md shadow-sm ">
|
|
<div className="mx-auto px-4 lg:px-6 max-w-[1520px]">
|
|
<div className="flex h-16 items-center justify-between gap-2 lg:gap-3">
|
|
{/* Logo */}
|
|
<Link
|
|
href="/"
|
|
className="shrink-0 transition-opacity hover:opacity-80"
|
|
>
|
|
<div className="relative h-32 w-[188px]">
|
|
<Image
|
|
src={Logo}
|
|
alt="Logo"
|
|
fill
|
|
className="object-contain"
|
|
priority
|
|
/>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Catalog Button - Desktop */}
|
|
<Button
|
|
data-catalog-trigger
|
|
onClick={toggleCategoryMenu}
|
|
className="cursor-pointer hidden gap-2.5 font-semibold lg:flex hover:bg-gray-800 bg-gray-900 text-white transition-all duration-200 shadow-sm hover:shadow-md"
|
|
size="lg"
|
|
>
|
|
{isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />}
|
|
{t("common.catalog")}
|
|
</Button>
|
|
|
|
{/* Mobile Search & Language */}
|
|
<div className="flex items-center gap-2 sm:hidden">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setIsMobileSearchOpen(true)}
|
|
className="hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<Search className="h-5 w-5 text-gray-700" />
|
|
</Button>
|
|
<LanguageSelector />
|
|
</div>
|
|
|
|
{/* Desktop Language Selector */}
|
|
<div className="hidden sm:block">
|
|
<LanguageSelector />
|
|
</div>
|
|
|
|
{/* Desktop Search Bar */}
|
|
<SearchBar
|
|
isMobile={false}
|
|
searchPlaceholder={t("common.search")}
|
|
className="hidden flex-1 md:flex "
|
|
locale={locale}
|
|
/>
|
|
|
|
{/* Action Buttons */}
|
|
<ActionButtons
|
|
isAuthenticated={isAuthenticated}
|
|
onAuthClick={handleAuthClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<CategoryMenu isOpen={isCategoryOpen} onClose={closeCategoryMenu} />
|
|
|
|
<SearchBar
|
|
isMobile={true}
|
|
isOpen={isMobileSearchOpen}
|
|
onClose={() => setIsMobileSearchOpen(false)}
|
|
searchPlaceholder={t("common.search")}
|
|
locale={locale}
|
|
/>
|
|
|
|
<AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
|
|
|
|
<MobileBottomNav
|
|
locale={locale}
|
|
onLoginClick={() => {
|
|
setIsLoginOpen(true);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|