danak-console/src/shared/Header.tsx

import { FC, useEffect, useState } from 'react'
import { ArrowDown2, Card, CloseCircle, Element3, HambergerMenu, Logout, ProfileCircle, Receipt1, Setting2, TicketDiscount, Wallet } from 'iconsax-react'
import AvatarImage from '../assets/images/avatar_image.png'
import { useTranslation } from 'react-i18next'
import { Link, useLocation } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Notifications from '../pages/notification/Notification'
import { useSharedStore } from './store/sharedStore'
import { useGetProfile } from '../pages/profile/hooks/useProfileData'
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import SideBarItem from './SideBarItem'
import { useGetWalletBalance } from '../pages/wallet/hooks/useWalletData'
import { NumberFormat } from '../config/func'
import Search from './components/Search'

const Header: FC = () => {

    const location = useLocation();
    const [popoverKey, setPopoverKey] = useState(0);
    const { t } = useTranslation('global')
    const { setOpenSidebar, openSidebar } = useSharedStore()
    const { data } = useGetProfile()
    const getWalletBalance = useGetWalletBalance()

    useEffect(() => {
        setPopoverKey((prevKey) => prevKey + 1);
    }, [location.pathname]);

    return (
        <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>

            <Search />
            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                <HambergerMenu size={24} color='black' />
            </div>
            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
            <div className='flex xl:gap-6 gap-4 items-center'>
                <Link to={Pages.services.other}>
                    <Element3 color='black' className='xl:size-[18px] size-[17px]' />
                </Link>
                <Link className='xl:hidden' to={Pages.wallet}>
                    <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                </Link>
                <Link className='hidden xl:block' to={Pages.wallet}>
                    <div className='flex items-center h-8 pl-2 rounded-full bg-[#EEF0F7]'>
                        <div className='px-3 text-xs'>
                            {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
                        </div>
                        <div className='size-[26px] flex justify-center items-center bg-white rounded-xl'>
                            <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                        </div>
                    </div>
                </Link>
                <Notifications />
                {
                    data && (
                        <Popover className="relative" key={popoverKey}>
                            <PopoverButton >
                                <div className='flex gap-2 items-center mt-2.5'>
                                    <div className='size-6 rounded-full bg-description overflow-hidden'>
                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
                                    </div>
                                    <div className='xl:flex hidden gap-1 items-center'>
                                        <div className='text-xs'>
                                            {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
                                        </div>
                                        <ArrowDown2 size={14} color='#8C90A3' />
                                    </div>
                                </div>
                            </PopoverButton>

                            <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7  z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
                                <div className='absolute xl:hidden top-6 left-6'>
                                    <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
                                </div>
                                <Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
                                    <div className='size-14 rounded-full overflow-hidden'>
                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
                                    </div>

                                    <div>
                                        {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
                                    </div>

                                    <div className='text-description'>
                                        {data?.data?.user?.email}
                                    </div>
                                </Link>

                                <div className='pb-6 px-6 border-b border-[#EAEDF5]'>
                                    <div className='flex justify-between items-center'>
                                        <SideBarItem
                                            icon={<Wallet size={20} color='black' />}
                                            title={t('header.wallet')}
                                            link={Pages.wallet}
                                            isActive
                                            isWithoutLine
                                        />
                                        <div className='flex xl:hidden items-center mt-4 h-8 pl-2 rounded-full bg-[#EEF0F7]'>
                                            <div className='ps-3'>{t('home.balance')}</div>
                                            <div className='px-3 text-xs'>
                                                {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
                                            </div>
                                        </div>
                                    </div>

                                    <SideBarItem
                                        icon={<Card color={'black'} size={20} />}
                                        title={t('sidebar.transactions')}
                                        isActive
                                        link={Pages.transactions}
                                        isWithoutLine
                                    />

                                    <SideBarItem
                                        icon={<TicketDiscount color={'black'} size={20} />}
                                        title={t('header.discounts')}
                                        isActive
                                        link={Pages.discounts}
                                        isWithoutLine
                                    />

                                    <SideBarItem
                                        icon={<Receipt1 color={'black'} size={20} />}
                                        title={t('header.financial_info')}
                                        isActive
                                        link={Pages.financial}
                                        isWithoutLine
                                    />

                                    <SideBarItem
                                        icon={<ProfileCircle color={'black'} size={20} />}
                                        title={t('header.profile')}
                                        isActive
                                        link={Pages.profile}
                                        isWithoutLine
                                    />

                                    <SideBarItem
                                        icon={<Setting2 color={'black'} size={20} />}
                                        title={t('header.setting')}
                                        isActive
                                        link={Pages.setting}
                                        isWithoutLine
                                    />
                                </div>

                                <div className='px-6 -mt-[2px]'>
                                    <SideBarItem
                                        icon={<Logout color={'black'} size={20} />}
                                        title={t('sidebar.logout')}
                                        isActive
                                        link={Pages.setting}
                                        isWithoutLine
                                        isLogout
                                    />
                                </div>

                            </PopoverPanel>
                        </Popover>
                    )
                }
            </div>
        </div>
    )
}

export default Header