You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.1 KiB
119 lines
3.1 KiB
import { useSystem, useSystemSettings } from "@/apis/hooks";
|
|
import { Action, Search } from "@/components";
|
|
import { Layout } from "@/constants";
|
|
import { useNavbar } from "@/contexts/Navbar";
|
|
import { useIsOnline } from "@/contexts/Online";
|
|
import { Environment, useGotoHomepage } from "@/utilities";
|
|
import {
|
|
faArrowRotateLeft,
|
|
faGear,
|
|
faPowerOff,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import {
|
|
Anchor,
|
|
Avatar,
|
|
Badge,
|
|
Burger,
|
|
createStyles,
|
|
Divider,
|
|
Group,
|
|
Header,
|
|
MediaQuery,
|
|
Menu,
|
|
} from "@mantine/core";
|
|
import { FunctionComponent } from "react";
|
|
|
|
const useStyles = createStyles((theme) => {
|
|
const headerBackgroundColor =
|
|
theme.colorScheme === "light" ? theme.colors.gray[0] : theme.colors.dark[4];
|
|
return {
|
|
header: {
|
|
backgroundColor: headerBackgroundColor,
|
|
},
|
|
};
|
|
});
|
|
|
|
const AppHeader: FunctionComponent = () => {
|
|
const { data: settings } = useSystemSettings();
|
|
const hasLogout = settings?.auth.type === "form";
|
|
|
|
const { show, showed } = useNavbar();
|
|
|
|
const online = useIsOnline();
|
|
const offline = !online;
|
|
|
|
const { shutdown, restart, logout } = useSystem();
|
|
|
|
const goHome = useGotoHomepage();
|
|
|
|
const { classes } = useStyles();
|
|
|
|
return (
|
|
<Header p="md" height={Layout.HEADER_HEIGHT} className={classes.header}>
|
|
<Group position="apart" noWrap>
|
|
<Group noWrap>
|
|
<MediaQuery
|
|
smallerThan={Layout.MOBILE_BREAKPOINT}
|
|
styles={{ display: "none" }}
|
|
>
|
|
<Anchor onClick={goHome}>
|
|
<Avatar
|
|
alt="brand"
|
|
size={32}
|
|
src={`${Environment.baseUrl}/static/logo64.png`}
|
|
></Avatar>
|
|
</Anchor>
|
|
</MediaQuery>
|
|
<MediaQuery
|
|
largerThan={Layout.MOBILE_BREAKPOINT}
|
|
styles={{ display: "none" }}
|
|
>
|
|
<Burger
|
|
opened={showed}
|
|
onClick={() => show(!showed)}
|
|
size="sm"
|
|
></Burger>
|
|
</MediaQuery>
|
|
<Badge size="lg" radius="sm">
|
|
Bazarr
|
|
</Badge>
|
|
</Group>
|
|
<Group spacing="xs" position="right" noWrap>
|
|
<Search></Search>
|
|
<Menu
|
|
control={
|
|
<Action
|
|
loading={offline}
|
|
color={offline ? "yellow" : undefined}
|
|
icon={faGear}
|
|
size="lg"
|
|
variant="light"
|
|
></Action>
|
|
}
|
|
>
|
|
<Menu.Item
|
|
icon={<FontAwesomeIcon icon={faArrowRotateLeft} />}
|
|
onClick={() => restart()}
|
|
>
|
|
Restart
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
icon={<FontAwesomeIcon icon={faPowerOff} />}
|
|
onClick={() => shutdown()}
|
|
>
|
|
Shutdown
|
|
</Menu.Item>
|
|
<Divider hidden={!hasLogout}></Divider>
|
|
<Menu.Item hidden={!hasLogout} onClick={() => logout()}>
|
|
Logout
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Group>
|
|
</Group>
|
|
</Header>
|
|
);
|
|
};
|
|
|
|
export default AppHeader;
|