63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { Link, Outlet, useNavigate } from 'react-router-dom'
|
|
import { useAuth } from '../context/AuthContext'
|
|
|
|
export function AdminLayout() {
|
|
const { logout } = useAuth()
|
|
const navigate = useNavigate()
|
|
|
|
async function handleLogout() {
|
|
await logout()
|
|
navigate('/login')
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
<nav className="bg-bg-elevated border-b border-border sticky top-0 z-50 backdrop-blur-md">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-14 items-center">
|
|
<Link to="/admin/dashboard" className="text-lg font-bold text-text hover:text-accent transition-colors">
|
|
Activiteiten Inventaris
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Link
|
|
to="/admin/dashboard"
|
|
className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
to="/admin/users"
|
|
className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
|
|
>
|
|
Gebruikers
|
|
</Link>
|
|
<Link
|
|
to="/admin/change-password"
|
|
className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
|
|
>
|
|
Wachtwoord
|
|
</Link>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="px-3 py-1.5 text-sm text-danger hover:bg-danger-muted rounded-md transition-colors"
|
|
>
|
|
Uitloggen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
|
|
<Outlet />
|
|
</main>
|
|
|
|
<footer className="border-t border-border-light py-6 text-center text-text-faint text-sm">
|
|
Activiteiten Inventaris Systeem
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|