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
|
import * as React from "react";
import classnames from "classnames";
import { Link, NavLink } from "react-router-dom";
import { useMediaQuery } from "react-responsive";
import { useC } from "./common";
import { useUser } from "@/services/user";
import TimelineLogo from "./TimelineLogo";
import UserAvatar from "./user/UserAvatar";
import "./AppBar.css";
export default function AppBar() {
const c = useC();
const user = useUser();
const hasAdministrationPermission = user && user.hasAdministrationPermission;
const isSmallScreen = useMediaQuery({ maxWidth: 576 });
const [expand, setExpand] = React.useState<boolean>(false);
const collapse = (): void => setExpand(false);
const toggleExpand = (): void => setExpand(!expand);
const createLink = (
link: string,
label: React.ReactNode,
className?: string,
): React.ReactNode => (
<NavLink
to={link}
onClick={collapse}
className={({ isActive }) => classnames(className, isActive && "active")}
>
{label}
</NavLink>
);
return (
<nav className={classnames("app-bar", isSmallScreen && "small-screen")}>
<Link to="/" className="app-bar-brand active">
<TimelineLogo className="app-bar-brand-icon" />
Timeline
</Link>
{isSmallScreen && (
<i className="bi-list app-bar-toggler" onClick={toggleExpand} />
)}
<div
className={classnames(
"app-bar-main-area",
!expand && "app-bar-collapse",
)}
>
<div className="app-bar-link-area">
{createLink("/settings", c("nav.settings"))}
{createLink("/about", c("nav.about"))}
{hasAdministrationPermission &&
createLink("/admin", c("nav.administration"))}
</div>
<div className="app-bar-user-area">
{user != null
? createLink(
"/",
<UserAvatar
username={user.username}
className="cru-avatar small cru-round cursor-pointer ml-auto"
/>,
"app-bar-avatar",
)
: createLink("/login", c("nav.login"))}
</div>
</div>
</nav>
);
}
|
