57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect } from "react";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
|
|
export function Nav() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
async function logout() {
|
|
await fetch("/api/v1/auth/logout", { method: "POST", credentials: "include" });
|
|
router.push("/");
|
|
}
|
|
|
|
const links = [
|
|
{ href: "/dashboard", label: "Dashboard" },
|
|
{ href: "/nodes", label: "Nodes" },
|
|
{ href: "/movies", label: "Movies" },
|
|
{ href: "/series", label: "Series" },
|
|
{ href: "/streams", label: "Streams" },
|
|
{ href: "/settings", label: "Instellingen" },
|
|
];
|
|
|
|
return (
|
|
<nav className="topnav">
|
|
<Link href="/dashboard" className="brand">
|
|
<span className="brand-mark">MC</span>
|
|
<span className="brand-text">
|
|
Media Cluster
|
|
<small>ops console</small>
|
|
</span>
|
|
</Link>
|
|
<div className="topnav-links">
|
|
{links.map((l) => (
|
|
<Link key={l.href} href={l.href} className={pathname === l.href ? "active" : ""}>
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<button type="button" className="btn-logout" onClick={logout}>
|
|
Uitloggen
|
|
</button>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
export function useAuth() {
|
|
const router = useRouter();
|
|
useEffect(() => {
|
|
fetch("/api/v1/auth/me", { credentials: "include" })
|
|
.then((r) => {
|
|
if (!r.ok) router.push("/");
|
|
})
|
|
.catch(() => router.push("/"));
|
|
}, [router]);
|
|
}
|