54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { NavLink } from "react-router";
|
|
import { t } from "@/config/i18n";
|
|
import "./index.css";
|
|
import { Group, Loader } from "@mantine/core";
|
|
import { Config } from "@/config/config";
|
|
import { useAuth } from "@/services/auth/AuthProvider";
|
|
import { useMediaQuery } from "@mantine/hooks";
|
|
import { IconHome, IconLogin, IconLogout, IconSettings } from "@tabler/icons-react";
|
|
|
|
export function Navbar() {
|
|
const { loggedUser: user, isLoading } = useAuth();
|
|
const isPhone = useMediaQuery("(max-width: 760px");
|
|
|
|
if (!user && isLoading) {
|
|
return (
|
|
<Group align="center" justify="center" h="80vh" w="100%">
|
|
<Loader color="pink" />
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<nav>
|
|
<Group>
|
|
<NavLink className={"navLink"} aria-label={t("home")} to="/">
|
|
{isPhone ? <IconHome/> : t("home", { capfirst: true })}
|
|
</NavLink>
|
|
{user?.logged ? (
|
|
<NavLink className={"navLink"} aria-label={t("dashboard")} to="/dashboard/help">
|
|
{isPhone ? <IconSettings/> : t("dashboard", { capfirst: true })}
|
|
</NavLink>
|
|
) : null}
|
|
</Group>
|
|
{!user?.logged ? (
|
|
<a
|
|
href={`${Config.backend_uri}/auth/login`}
|
|
className={"navLink"}
|
|
aria-label={t("login with keycloak", { capfirst: true })}
|
|
>
|
|
{isPhone ? <IconLogin/> : t("login with keycloak", { capfirst: true })}
|
|
</a>
|
|
) : (
|
|
<a
|
|
href={`${Config.backend_uri}/auth/logout`}
|
|
className={"navLink"}
|
|
aria-label={t("logout", { capfirst: true })}
|
|
>
|
|
{isPhone ? <IconLogout/> : t("logout", { capfirst: true })}
|
|
</a>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|