gpatruno
56 lines
1.6 KiB
React
56 lines
1.6 KiB
React
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../AuthContext';
|
|
|
|
const NAV = [
|
|
{ to: '/admin', end: true, label: 'Overview' },
|
|
{ to: '/admin/players', label: 'Players' },
|
|
{ to: '/admin/cases', label: 'Cases' },
|
|
{ to: '/admin/items', label: 'Items' },
|
|
{ to: '/admin/categories', label: 'Categories' },
|
|
{ to: '/admin/drops', label: 'Drops' },
|
|
];
|
|
|
|
export default function AdminLayout() {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="admin-shell">
|
|
<aside className="admin-sidebar">
|
|
<div className="admin-sidebar-brand">
|
|
<span className="brand">CaseOrion</span>
|
|
<span className="admin-sidebar-tag">Admin</span>
|
|
</div>
|
|
<nav className="admin-side-nav">
|
|
{NAV.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
end={item.end}
|
|
className={({ isActive }) => (isActive ? 'active' : undefined)}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
<div className="admin-sidebar-foot">
|
|
<div className="muted admin-sidebar-user">@{user?.username}</div>
|
|
<button
|
|
type="button"
|
|
className="btn ghost"
|
|
onClick={async () => {
|
|
await logout();
|
|
navigate('/login');
|
|
}}
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<div className="admin-main">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|