84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import { NavLink, Outlet, useNavigate } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { useLogout } from "../api/queries";
|
|
import { Button } from "@/components/ui/button";
|
|
import { LangSwitch } from "./lang-switch";
|
|
|
|
const DISABLED_NAV = ["fields"] as const;
|
|
|
|
export function AppShell() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const logout = useLogout();
|
|
|
|
const onSignOut = () =>
|
|
logout.mutate(undefined, {
|
|
onSuccess: () => navigate("/login", { replace: true }),
|
|
});
|
|
|
|
return (
|
|
<div className="flex min-h-screen">
|
|
<aside className="w-44 shrink-0 border-r bg-neutral-50 p-3">
|
|
<div className="mb-4 font-semibold">{t("app.name")}</div>
|
|
<nav className="space-y-1 text-sm">
|
|
<NavLink
|
|
to="/objects"
|
|
className={({ isActive }) =>
|
|
`block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
|
|
}
|
|
>
|
|
{t("nav.objects")}
|
|
</NavLink>
|
|
<NavLink
|
|
to="/vocabularies"
|
|
className={({ isActive }) =>
|
|
`block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
|
|
}
|
|
>
|
|
{t("nav.vocabularies")}
|
|
</NavLink>
|
|
<NavLink
|
|
to="/authorities"
|
|
className={({ isActive }) =>
|
|
`block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
|
|
}
|
|
>
|
|
{t("nav.authorities")}
|
|
</NavLink>
|
|
<NavLink
|
|
to="/search"
|
|
className={({ isActive }) =>
|
|
`block rounded px-2 py-1 ${isActive ? "bg-neutral-200 font-medium" : ""}`
|
|
}
|
|
>
|
|
{t("nav.search")}
|
|
</NavLink>
|
|
{DISABLED_NAV.map((key) => (
|
|
<button
|
|
key={key}
|
|
disabled
|
|
title={t("nav.soon")}
|
|
className="block w-full cursor-not-allowed rounded px-2 py-1 text-left text-neutral-400"
|
|
>
|
|
{t(`nav.${key}`)}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
<div className="flex flex-1 flex-col">
|
|
<header className="flex items-center gap-4 border-b px-4 py-2">
|
|
<div className="flex-1" />
|
|
<LangSwitch />
|
|
<Button variant="ghost" size="sm" onClick={onSignOut}>
|
|
{t("auth.signOut")}
|
|
</Button>
|
|
</header>
|
|
<main className="flex-1 overflow-hidden">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|