84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { Link, useFetcher } from "@remix-run/react";
|
|
import Meta from "~/lib/api/meta";
|
|
import { User, UserSettings } from "~/lib/api/user";
|
|
import Logo from "./Logo";
|
|
|
|
import { Nav, Navbar, NavDropdown } from "react-bootstrap";
|
|
import { BrightnessHigh, BrightnessHighFill, MoonFill } from "react-bootstrap-icons";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
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 (
|
|
<Navbar expand="lg" className={`mb-4 mx-2 bg-${theme}`} color={theme} variant={theme}>
|
|
<Navbar.Brand to="/" as={Link}>
|
|
<Logo />
|
|
</Navbar.Brand>
|
|
<Navbar.Toggle aria-controls="main-navbar" />
|
|
<Navbar.Collapse id="main-navbar">
|
|
<Nav className="ms-auto">
|
|
{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>
|
|
</Nav>
|
|
</Navbar.Collapse>
|
|
</Navbar>
|
|
);
|
|
}
|