1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import { FunctionComponent } from "react";
import {
Anchor,
AppShell,
Avatar,
Badge,
Burger,
Divider,
Group,
Menu,
} from "@mantine/core";
import {
faArrowRotateLeft,
faGear,
faPowerOff,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useSystem, useSystemSettings } from "@/apis/hooks";
import { Action, Search } from "@/components";
import { useNavbar } from "@/contexts/Navbar";
import { useIsOnline } from "@/contexts/Online";
import { Environment, useGotoHomepage } from "@/utilities";
import styles from "./Header.module.scss";
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();
return (
<AppShell.Header p="md" className={styles.header}>
<Group justify="space-between" wrap="nowrap">
<Group wrap="nowrap">
<Anchor onClick={goHome} visibleFrom="sm">
<Avatar
alt="brand"
size={32}
src={`${Environment.baseUrl}/images/logo64.png`}
></Avatar>
</Anchor>
<Burger
opened={showed}
onClick={() => show(!showed)}
size="sm"
hiddenFrom="sm"
></Burger>
<Badge size="lg" radius="sm">
Bazarr
</Badge>
</Group>
<Group gap="xs" justify="right" wrap="nowrap">
<Search></Search>
<Menu>
<Menu.Target>
<Action
label="System"
tooltip={{ position: "left", openDelay: 2000 }}
loading={offline}
color={offline ? "yellow" : undefined}
icon={faGear}
size="lg"
variant="light"
></Action>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<FontAwesomeIcon icon={faArrowRotateLeft} />}
onClick={() => restart()}
>
Restart
</Menu.Item>
<Menu.Item
leftSection={<FontAwesomeIcon icon={faPowerOff} />}
onClick={() => shutdown()}
>
Shutdown
</Menu.Item>
<Divider hidden={!hasLogout}></Divider>
<Menu.Item hidden={!hasLogout} onClick={() => logout()}>
Logout
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Group>
</Group>
</AppShell.Header>
);
};
export default AppHeader;
|
