sam
0f3ab19f6f
This means it's not possible to manually change the theme, but all major operating systems support global dark mode now, so it shouldn't be a huge problem. Will re-add the dark mode toggle if the Sec-CH-Prefers-Color-Scheme header gets added to Firefox and Safari.
44 lines
1.1 KiB
TypeScript
44 lines
1.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>
|
|
);
|
|
}
|