42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { Link, Outlet, useNavigate } from 'react-router-dom';
|
|
import * as authApi from '../api/auth';
|
|
import { useAuth } from '../context/AuthContext';
|
|
|
|
export function AdminLayout() {
|
|
const { signOut } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await authApi.logout();
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
signOut();
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<div className="shell admin-shell">
|
|
<aside className="admin-sidebar">
|
|
<div className="brand">管理後台</div>
|
|
<nav className="admin-nav">
|
|
<Link to="/admin">總覽</Link>
|
|
<Link to="/admin/roles">角色管理</Link>
|
|
<Link to="/admin/role-permissions">角色權限</Link>
|
|
<Link to="/admin/users">使用者角色</Link>
|
|
</nav>
|
|
<Link to="/app" className="back-link">
|
|
← 回使用者前台
|
|
</Link>
|
|
<button type="button" className="btn-ghost" onClick={handleLogout}>
|
|
登出
|
|
</button>
|
|
</aside>
|
|
<main className="page admin-page">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|