"use client"; import React, { useEffect, useRef, useState } from "react"; import Link from "next/link"; import LanguageSwitcher from "./LanguageSwitcher"; import ProfileDropdown from "./ProfileDropdown"; import NotificationDropdown from "./NotificationDropdown"; import HeaderSearch from "./HeaderSearch"; import ProfileSideModal from "./ProfileSideModal"; import { usePathname, useRouter } from "next/navigation"; import { Home, Heart, Bell, MessageCircle, PlusCircle } from "lucide-react"; import { AiOutlineLogin } from "react-icons/ai"; import { TiContacts } from "react-icons/ti"; import DarkModeToggle from "../DarkModeToggle"; import Button from "../common/Button"; import { useAppSelector } from "@/app/store/hooks"; import { useTranslations } from "next-intl"; import { socket } from "@/app/(user)/chat/chatSocket"; import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io"; import { RiFileList3Line } from "react-icons/ri"; export default function Header({ locale, className = "" }: any) { const [isOpen, setIsOpen] = useState(false); const t = useTranslations(); const [isMobile, setIsMobile] = useState(false); const dropdownRef = useRef(null); const { user } = useAppSelector((state) => state?.auth); const [open, setOpen] = useState(false); const toggleDropdown = () => setIsOpen((prev) => !prev); const pathname = usePathname(); const router = useRouter(); const [unreadCount, setUnreadCount] = useState(0); useEffect(() => { socket.auth = { token: user?.token }; socket.connect(); socket.on("connect", () => { // console.log("Connected to Socket", socket.id); }); const handler = (data: any) => { const unreadCnt = data?.count?.totalUnreadConversations || 0; setUnreadCount(unreadCnt); }; socket.on("chat_notification_count", handler); const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && !(dropdownRef.current as any).contains(event.target) ) { setIsOpen(false); } }; const handleCloseDropdown = () => { setIsOpen(false); }; document.addEventListener("mousedown", handleClickOutside); window.addEventListener("closeProfileDropdown", handleCloseDropdown); return () => { document.removeEventListener("mousedown", handleClickOutside); window.removeEventListener("closeProfileDropdown", handleCloseDropdown); socket.off("chat_notification_count", handler); }; }, []); const navItems = [ { name: t("home"), icon: Home, href: "/", active: pathname === "/", badge: false, }, { name: t("wishlist"), icon: Heart, href: "/wishlist", active: pathname === "/wishlist", badge: true, }, { name: t("help"), icon: TiContacts, href: "/contact", active: pathname === "/contact", badge: false, }, { name: t("login"), icon: AiOutlineLogin, href: "/login", active: pathname === "/login", badge: false, }, { name: t("notifications"), icon: Bell, href: "/notifications", active: pathname === "/notifications", badge: true, }, { name: t("chat1"), icon: MessageCircle, href: "/chat", active: pathname === "/chat", badge: true, }, ]; const notAllowedBottomHeader = [ "/filters/products", "/services", "/jobs", "/community", ]; return ( <>
Kanzy
setOpen(false)} />
setOpen(true)}>
{open && (
{t("header.search") || "Search"}
setOpen(false)} />
)}
setIsMobile(true)} >
setIsMobile(false)} />
{user ? ( <> {unreadCount > 0 && ( {unreadCount} )} ) : null}
{user ? (
Profile { e.currentTarget.onerror = null; e.currentTarget.src = "/profile-avatar.png"; }} />

{user?.username} {isOpen ? ( ) : ( )}

{isOpen && (
)}
) : ( <> {t("header.login") || "Login"} )} {t("header.post_a_list")}
{notAllowedBottomHeader.includes(pathname) ? null : (
{/* Left icons */} {navItems.slice(0, 2).map((item) => ( ))}
router.push("/listing/create")} >
{/* Right icons */} {!user && navItems .slice(2, 4) .map((item) => ( ))} {user && navItems .slice(4) .map((item) => ( ))}
)} ); } function NavIcon({ name, icon: Icon, active, badge, href, router }: any) { return (
router.push(href)} >
{badge && ( )}
{name}
); }