sova-bootstrap
74 lines
2.2 KiB
React
74 lines
2.2 KiB
React
import { useState, useRef, useEffect } from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { useLogoutMutation } from '/src/api/apiSlice'
|
|
|
|
export const UserBurger = () => {
|
|
const username = useSelector( s => s.auth.username );
|
|
const [ logout ] = useLogoutMutation()
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const toggleRef = useRef(null);
|
|
const menuRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const handleOutside = e => {
|
|
if (
|
|
menuRef.current &&
|
|
!menuRef.current.contains(e.target) &&
|
|
toggleRef.current &&
|
|
!toggleRef.current.contains(e.target)
|
|
) {
|
|
setOpen(false)
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleOutside)
|
|
return () => document.removeEventListener('mousedown', handleOutside)
|
|
}, []);
|
|
|
|
return (
|
|
<ul className="navbar-nav ml-auto">
|
|
<li className="nav-item dropdown no-arrow">
|
|
<button
|
|
ref={toggleRef}
|
|
className="nav-link dropdown-toggle btn btn-link p-0"
|
|
onClick={() => setOpen(o => !o)}
|
|
aria-haspopup="true"
|
|
aria-expanded={open}
|
|
>
|
|
<i className="fas fa-user-circle fa-fw"></i>
|
|
<span className="ml-2 d-none d-lg-inline text-gray-600 small">
|
|
{username}
|
|
</span>
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
ref={menuRef}
|
|
className="dropdown-menu dropdown-menu-right shadow animated--grow-in show"
|
|
aria-labelledby="userMenu"
|
|
>
|
|
<Link
|
|
className="dropdown-item"
|
|
to="/user"
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
<i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
|
|
Профиль
|
|
</Link>
|
|
<div className="dropdown-divider"></div>
|
|
<button
|
|
className="dropdown-item"
|
|
onClick={() => { setOpen(false); logout() }}
|
|
>
|
|
<i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
|
|
Выйти
|
|
</button>
|
|
</div>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
)
|
|
}
|