49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
|
import { useAuth } from '@/hooks/auth'
|
||
|
|
import { Avatar } from 'primereact/avatar'
|
||
|
|
import { memo, useEffect, useState } from 'react'
|
||
|
|
import { MdExpandMore } from 'react-icons/md'
|
||
|
|
|
||
|
|
function NavbarMemo() {
|
||
|
|
const { logout } = useAuth({})
|
||
|
|
const [user, setUser] = useState([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setUser(JSON.parse(localStorage.getItem('user')))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const handleLogout = () => {
|
||
|
|
logout()
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='navbar 2xl:px-24 px-10 flex justify-end items-center border-cream h-[150px]'>
|
||
|
|
<div className='logout z-10 py-3 px-5'>
|
||
|
|
<div className='flex items-center gap-x-3'>
|
||
|
|
<Avatar image={'/img/M.png'} shape='circle' />
|
||
|
|
<div className='text-white'>
|
||
|
|
<p className='font-semibold capitalize'>{user && user.nama_lengkap}</p>
|
||
|
|
<p className='text-xs text-hijau/70'>{user && user.role}</p>
|
||
|
|
</div>
|
||
|
|
<MdExpandMore className='text-xl' />
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className='absolute bg-white top-24 2xl:right-32 right-20 w-56 p-3 rounded flex flex-col shadow-lg gap-y-3 logout-pop'
|
||
|
|
onClick={handleLogout}
|
||
|
|
>
|
||
|
|
<div className='flex items-center gap-x-3 shadow-md p-2'>
|
||
|
|
<Avatar image={'/img/M.png'} shape='circle' className='shadow' />
|
||
|
|
<p className='font-semibold capitalize'>{user && user.nama_lengkap}</p>
|
||
|
|
</div>
|
||
|
|
<div className='flex items-center gap-x-3 hover:bg-abu2 cursor-pointer p-2 rounded'>
|
||
|
|
<i className='pi pi-sign-out rounded-full p-2' />
|
||
|
|
<p className='text-sm'>Logout</p>
|
||
|
|
</div>
|
||
|
|
<div className='bg-overlay'></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Navbar = memo(NavbarMemo)
|