76 lines
2 KiB
TypeScript
76 lines
2 KiB
TypeScript
import { Link, useFetcher } from "@remix-run/react";
|
|
import Meta from "~/lib/api/meta";
|
|
import { User, UserSettings } from "~/lib/api/user";
|
|
|
|
import { Nav, NavDropdown } from "react-bootstrap";
|
|
import { BrightnessHigh, BrightnessHighFill, MoonFill } from "react-bootstrap-icons";
|
|
import { useTranslation } from "react-i18next";
|
|
import BaseNavbar from "~/components/nav/BaseNavbar";
|
|
|
|
export default function MainNavbar({
|
|
user,
|
|
settings,
|
|
}: {
|
|
meta: Meta;
|
|
user?: User;
|
|
settings: UserSettings;
|
|
}) {
|
|
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>
|
|
);
|
|
|
|
const ThemeIcon =
|
|
settings.dark_mode === null
|
|
? BrightnessHigh
|
|
: settings.dark_mode
|
|
? MoonFill
|
|
: BrightnessHighFill;
|
|
|
|
const theme = settings.dark_mode ? "dark" : "light";
|
|
|
|
return (
|
|
<BaseNavbar theme={theme}>
|
|
{userMenu}
|
|
<fetcher.Form method="POST" action="/dark-mode">
|
|
<NavDropdown
|
|
title={
|
|
<>
|
|
<ThemeIcon /> {t("navbar.theme")}
|
|
</>
|
|
}
|
|
align="end"
|
|
>
|
|
<NavDropdown.Item as="button" name="theme" value="auto" type="submit">
|
|
{t("navbar.theme-auto")}
|
|
</NavDropdown.Item>
|
|
<NavDropdown.Item as="button" name="theme" value="dark" type="submit">
|
|
{t("navbar.theme-dark")}
|
|
</NavDropdown.Item>
|
|
<NavDropdown.Item as="button" name="theme" value="light" type="submit">
|
|
{t("navbar.theme-light")}
|
|
</NavDropdown.Item>
|
|
</NavDropdown>
|
|
</fetcher.Form>
|
|
</BaseNavbar>
|
|
);
|
|
}
|