default 1 column + header + ...
This commit is contained in:
hamid zarghami
+49
-104
@@ -1,56 +1,61 @@
|
||||
import { FC } from 'react'
|
||||
import Input from '../components/Input'
|
||||
import { Element3, HambergerMenu, Wallet } from 'iconsax-react'
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
// import Input from '../components/Input'
|
||||
import { ArrowDown2, CloseCircle, Element4, HambergerMenu, Logout } from 'iconsax-react'
|
||||
import AvatarImage from '../assets/images/avatar_image.png'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Paths } from '@/utils/Paths'
|
||||
// import Notifications from '../pages/notification/Notification'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
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 { useGetWalletBalance } from '../pages/wallet/hooks/useWalletData'
|
||||
// import { NumberFormat } from '../config/func'
|
||||
import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
|
||||
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
||||
import { removeRefreshToken, removeToken } from '../config/func'
|
||||
import { clx } from '../helpers/utils'
|
||||
|
||||
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()
|
||||
const { setOpenSidebar, openSidebar, hasSubMenu } = useSharedStore()
|
||||
const { data } = useGetProfile()
|
||||
|
||||
useEffect(() => {
|
||||
setPopoverKey((prevKey) => prevKey + 1);
|
||||
}, [location.pathname]);
|
||||
|
||||
const handleLogout = () => {
|
||||
removeToken()
|
||||
removeRefreshToken()
|
||||
window.location.href = import.meta.env.VITE_LOGIN_URL
|
||||
}
|
||||
|
||||
const hasSubMenuOpen = hasSubMenu && (openSidebar || window.innerWidth > 1139)
|
||||
|
||||
return (
|
||||
<div className='fixed z-10 right-2 left-2 md:right-4 md:left-4 xl:right-[285px] top-2 md:top-4 xl:h-16 h-12 flex items-center px-3 md:px-6 bg-white justify-between rounded-[20px] md:rounded-[32px] xl:w-[calc(100%-305px)]'>
|
||||
<div className={clx(
|
||||
'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)]',
|
||||
hasSubMenuOpen && '!right-[320px] !w-[calc(100%-340px)]'
|
||||
)}>
|
||||
|
||||
<div className='min-w-[200px] md:min-w-[270px] hidden xl:block'>
|
||||
<Input
|
||||
<div className='min-w-[270px] hidden xl:block'>
|
||||
{/* <Input
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
className='bg-secondary border-none'
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
<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-3 md:gap-4 items-center'>
|
||||
<Link to={Paths.home}>
|
||||
<Element3 color='black' className='size-4 md:size-[17px] xl:size-[18px]' />
|
||||
</Link>
|
||||
<Link className='xl:hidden' to={Paths.home}>
|
||||
<Wallet className='size-4 md:size-[17px] xl:size-[18px]' color='black' />
|
||||
</Link>
|
||||
<Link className='hidden xl:block' to={Paths.home}>
|
||||
<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 /> */}
|
||||
{/* {
|
||||
<div className='flex xl:gap-6 gap-4 items-center'>
|
||||
<a target='_blank' href={`https://console.danakcorp.com/services`}>
|
||||
<Element4 size={19} color='black' />
|
||||
</a>
|
||||
{/* <Link className='xl:hidden' to={Pages.wallet}>
|
||||
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
|
||||
</Link> */}
|
||||
<Notifications />
|
||||
{
|
||||
data && (
|
||||
<Popover className="relative" key={popoverKey}>
|
||||
<PopoverButton >
|
||||
@@ -71,7 +76,7 @@ const Header: FC = () => {
|
||||
<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'>
|
||||
<Link to={'#'} 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>
|
||||
@@ -85,79 +90,19 @@ const Header: FC = () => {
|
||||
</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 className='px-6 mt-2'>
|
||||
<div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
|
||||
<Logout size={20} color='black' />
|
||||
<div>
|
||||
{t('sidebar.logout')}
|
||||
</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>
|
||||
)
|
||||
|
||||
@@ -8,4 +8,6 @@ export const useSharedStore = create<SharedStoreType>((set) => ({
|
||||
setOpenNewMessage: (value) => set({ openNewMessage: value }),
|
||||
openBuySpace: false,
|
||||
setOpenBuySpace: (value) => set({ openBuySpace: value }),
|
||||
hasSubMenu: false,
|
||||
setSubtMenu: (value: boolean) => set({ hasSubMenu: value }),
|
||||
}));
|
||||
|
||||
@@ -5,4 +5,6 @@ export type SharedStoreType = {
|
||||
setOpenNewMessage: (value: boolean) => void;
|
||||
openBuySpace: boolean;
|
||||
setOpenBuySpace: (value: boolean) => void;
|
||||
hasSubMenu: boolean;
|
||||
setSubtMenu: (value: boolean) => void;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user