generated from pricelees/issue-pr-template
64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
|
|
const AdminNavbar: React.FC = () => {
|
|
const { loggedIn, userName, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
await logout();
|
|
navigate('/');
|
|
} catch (error) {
|
|
console.error("Logout failed", error);
|
|
// Handle logout error if needed
|
|
}
|
|
};
|
|
|
|
return (
|
|
<nav className="navbar navbar-expand-lg navbar-light bg-light">
|
|
<Link className="navbar-brand" to="/admin">
|
|
<img src="/image/admin-logo.png" alt="LOGO" style={{ height: '40px' }} />
|
|
</Link>
|
|
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul className="navbar-nav ms-auto">
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/reservation">Reservation</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/waiting">Waiting</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/theme">Theme</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/admin/time">Time</Link>
|
|
</li>
|
|
{!loggedIn ? (
|
|
<li className="nav-item">
|
|
<Link className="nav-link" to="/login">Login</Link>
|
|
</li>
|
|
) : (
|
|
<li className="nav-item dropdown">
|
|
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<img className="profile-image" src="/image/default-profile.png" alt="Profile" />
|
|
<span id="profile-name">{userName || 'Profile'}</span>
|
|
</a>
|
|
<ul className="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<li><a className="dropdown-item" href="#" onClick={handleLogout}>Logout</a></li>
|
|
</ul>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default AdminNavbar;
|