35 lines
1 KiB
TypeScript
35 lines
1 KiB
TypeScript
import { Link, useFetcher } from "@remix-run/react";
|
|
import Meta from "~/lib/api/meta";
|
|
import { User } from "~/lib/api/user";
|
|
|
|
import { Nav, NavDropdown } from "react-bootstrap";
|
|
import { useTranslation } from "react-i18next";
|
|
import BaseNavbar from "~/components/nav/BaseNavbar";
|
|
|
|
export default function MainNavbar({ user }: { meta: Meta; user?: User }) {
|
|
const fetcher = useFetcher();
|
|
const { t } = useTranslation();
|
|
|
|
const userMenu = user ? (
|
|
<NavDropdown title={<>@{user.username}</>} align="end">
|
|
<NavDropdown.Item as={Link} to={`/@${user.username}`}>
|
|
{t("navbar.view-profile")}
|
|
</NavDropdown.Item>
|
|
<NavDropdown.Item as={Link} to="/settings">
|
|
{t("navbar.settings")}
|
|
</NavDropdown.Item>
|
|
<NavDropdown.Divider />
|
|
<fetcher.Form method="POST" action="/auth/log-out">
|
|
<NavDropdown.Item as="button" type="submit">
|
|
{t("navbar.log-out")}
|
|
</NavDropdown.Item>
|
|
</fetcher.Form>
|
|
</NavDropdown>
|
|
) : (
|
|
<Nav.Link to="/auth/log-in" as={Link}>
|
|
{t("navbar.log-in")}
|
|
</Nav.Link>
|
|
);
|
|
|
|
return <BaseNavbar>{userMenu}</BaseNavbar>;
|
|
}
|