46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../context/AuthContext';
|
|
|
|
export default function Navbar() {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
const menuRef = useRef();
|
|
|
|
useEffect(() => {
|
|
const handleClick = (e) => {
|
|
if (menuRef.current && !menuRef.current.contains(e.target)) setShowMenu(false);
|
|
};
|
|
document.addEventListener('mousedown', handleClick);
|
|
return () => document.removeEventListener('mousedown', handleClick);
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<nav className="navbar">
|
|
<div className="navbar-brand">
|
|
<Link to="/">The Howling Whispers</Link>
|
|
</div>
|
|
<div className="navbar-links">
|
|
<Link to="/characters">Characters</Link>
|
|
<Link to="/lorebooks">Lorebooks</Link>
|
|
<div className="user-menu" ref={menuRef}>
|
|
<button className="user-menu-btn" onClick={() => setShowMenu(!showMenu)}>
|
|
{user?.username}
|
|
</button>
|
|
{showMenu && (
|
|
<div className="user-dropdown">
|
|
<button onClick={handleLogout}>Sign Out</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|