125 lines
6.4 KiB
TypeScript
125 lines
6.4 KiB
TypeScript
import { type FC, useEffect, useState } from 'react'
|
|
import Input from '@/components/Input'
|
|
import UserAvatar from '@/components/UserAvatar'
|
|
import { ArrowDown2, CloseCircle, HambergerMenu, Logout } from 'iconsax-react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useLocation } from 'react-router-dom'
|
|
import Notifications from '@/pages/notification/Notification'
|
|
import { useSharedStore } from './store/useSharedStore'
|
|
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
|
import SidebarItem from './SidebarItem'
|
|
import { t } from '@/locale'
|
|
import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
|
|
import { Paths } from '@/config/Paths'
|
|
|
|
const Header: FC = () => {
|
|
|
|
const location = useLocation();
|
|
const [popoverKey, setPopoverKey] = useState(0);
|
|
const { setOpenSidebar, openSidebar } = useSharedStore()
|
|
const { data } = useGetAdminMe()
|
|
const admin = data?.data
|
|
|
|
const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
|
|
const roleTitle = admin?.role?.title || admin?.role?.name || ''
|
|
|
|
useEffect(() => {
|
|
setPopoverKey((prevKey) => prevKey + 1);
|
|
}, [location.pathname]);
|
|
|
|
return (
|
|
<div className='fixed z-10 left-[var(--layout-frame)] right-[var(--layout-frame)] top-[var(--layout-frame)] flex h-[var(--layout-header-height)] items-center justify-between rounded-[32px] bg-white px-6 xl:left-auto xl:right-[calc(var(--layout-frame)+var(--layout-main-offset))] xl:h-[var(--layout-header-height-xl)] xl:w-[calc(100%-(var(--layout-frame)*2)-var(--layout-main-offset))]'>
|
|
|
|
<div className='min-w-[270px] hidden xl:block'>
|
|
<Input
|
|
variant='search'
|
|
placeholder={t('header.search')}
|
|
/>
|
|
</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-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}> */}
|
|
<Notifications />
|
|
{admin && (
|
|
<Popover className="relative" key={popoverKey}>
|
|
<PopoverButton>
|
|
<div className='flex gap-2 items-center mt-2.5'>
|
|
<UserAvatar
|
|
src={admin.avatarUrl}
|
|
firstName={admin.firstName}
|
|
lastName={admin.lastName}
|
|
className='size-6'
|
|
textClassName='text-xs'
|
|
/>
|
|
<div className='xl:flex hidden gap-1 items-center'>
|
|
<div className='flex flex-col items-start'>
|
|
<div className='text-xs'>
|
|
{displayName || String(admin.phone ?? '')}
|
|
</div>
|
|
{roleTitle && (
|
|
<div className='text-[10px] text-description'>
|
|
{roleTitle}
|
|
</div>
|
|
)}
|
|
</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={`${Paths.admin.update}${admin.id}`} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
|
|
<UserAvatar
|
|
src={admin.avatarUrl}
|
|
firstName={admin.firstName}
|
|
lastName={admin.lastName}
|
|
className='size-14'
|
|
textClassName='text-lg'
|
|
/>
|
|
<div>
|
|
{displayName || String(admin.phone ?? '')}
|
|
</div>
|
|
{roleTitle && (
|
|
<div className='text-description'>
|
|
{roleTitle}
|
|
</div>
|
|
)}
|
|
<div className='text-description'>
|
|
{String(admin.phone ?? '')}
|
|
</div>
|
|
</Link>
|
|
|
|
|
|
<div className='px-6 -mt-[2px]'>
|
|
<SidebarItem
|
|
icon={<Logout color={'black'} size={20} />}
|
|
title={t('sidebar.logout')}
|
|
isActive
|
|
link={Paths.auth.login}
|
|
isWithoutLine
|
|
isLogout
|
|
activeName=''
|
|
/>
|
|
</div>
|
|
</PopoverPanel>
|
|
</Popover>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header
|