43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
import { NavLink, useNavigate, Outlet } from 'react-router-dom';
|
||
|
|
import { setToken } from '../api/client';
|
||
|
|
import './Layout.css';
|
||
|
|
|
||
|
|
export default function Layout() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
function handleLogout() {
|
||
|
|
setToken(null);
|
||
|
|
navigate('/');
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="app-layout">
|
||
|
|
<aside className="sidebar">
|
||
|
|
<div className="sidebar-brand">
|
||
|
|
<h2>OTA Manager</h2>
|
||
|
|
</div>
|
||
|
|
<nav>
|
||
|
|
<NavLink to="/dashboard" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
|
||
|
|
Dashboard
|
||
|
|
</NavLink>
|
||
|
|
<NavLink to="/artefacts" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
|
||
|
|
Versions
|
||
|
|
</NavLink>
|
||
|
|
<NavLink to="/deployments" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
|
||
|
|
Deployments
|
||
|
|
</NavLink>
|
||
|
|
<NavLink to="/users" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
|
||
|
|
Admin Users
|
||
|
|
</NavLink>
|
||
|
|
</nav>
|
||
|
|
<div className="sidebar-footer">
|
||
|
|
<button className="btn-logout" onClick={handleLogout}>Logout</button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<main className="content">
|
||
|
|
<Outlet />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|