danak/negareh-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
morteza-mortezai
2026-07-02 21:31:09 +03:30
parent f7deabd52a
commit 207f83be8d
1 changed files with 13 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/Header.tsx
+13 -123
View File
@@ -1,31 +1,19 @@
import { type FC, useEffect } from 'react'
import { type FC } from 'react'
import Input from '@/components/Input'
import { HambergerMenu, Wallet } from 'iconsax-react'
// import AvatarImage from '@/assets/images/avatar_image.png'
import { useLocation } from 'react-router-dom'
import Notifications from '@/pages/notification/Notification'
import { useSharedStore } from './store/useSharedStore'
// 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 { t } from '@/locale'
import { useGetMe } from '@/pages/user/hooks/useUserData'
import { NumberFormat } from '@/config/func'
const Header: FC = () => {
const location = useLocation();
const { data } = useGetMe()
// const [popoverKey, setPopoverKey] = useState(0);
const { setOpenSidebar, openSidebar } = useSharedStore()
// const { data } = useGetProfile()
// const getWalletBalance = useGetWalletBalance()
useEffect(() => {
// setPopoverKey((prevKey) => prevKey + 1);
}, [location.pathname]);
const displayName = [data?.firstName, data?.lastName].filter(Boolean).join(' ').trim()
const initials = `${String(data?.firstName ?? '').charAt(0)}${String(data?.lastName ?? '').charAt(0)}`
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)]'>
@@ -59,114 +47,16 @@ const Header: FC = () => {
</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('rial')}
</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>
)
} */}
{displayName && (
<div className='flex gap-2 items-center'>
<div className='size-6 rounded-full bg-description overflow-hidden flex items-center justify-center text-white text-xs font-medium'>
{initials}
</div>
<div className='xl:block hidden text-xs'>
{displayName}
</div>
</div>
)}
</div>
</div>
)