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
99
100
101
102
103
104
|
import { useState } from "react";
import classnames from "classnames";
import { Link, NavLink } from "react-router-dom";
import { useUser } from "~src/services/user";
import { I18nText, useC } from "./common";
import { useMobile } from "./hooks";
import TimelineLogo from "./TimelineLogo";
import { IconButton } from "./button";
import UserAvatar from "./user/UserAvatar";
import "./AppBar.css";
function AppBarNavLink({
link,
className,
label,
onClick,
children,
}: {
link: string;
className?: string;
label?: I18nText;
onClick?: () => void;
children?: React.ReactNode;
}) {
if (label != null && children != null) {
throw new Error("AppBarNavLink: label and children cannot be both set");
}
const c = useC();
return (
<NavLink
to={link}
className={({ isActive }) => classnames(className, isActive && "active")}
onClick={onClick}
>
{children != null ? children : c(label)}
</NavLink>
);
}
export default function AppBar() {
const isMobile = useMobile();
const [isCollapse, setIsCollapse] = useState<boolean>(true);
const collapse = isMobile ? () => setIsCollapse(true) : undefined;
const toggleCollapse = () => setIsCollapse(!isCollapse);
const user = useUser();
const hasAdministrationPermission = user && user.hasAdministrationPermission;
return (
<nav
className={classnames(
isMobile ? "mobile" : "desktop",
"app-bar",
isCollapse && "collapse",
)}
>
<Link to="/" className="app-bar-brand" onClick={collapse}>
<TimelineLogo className="app-bar-brand-icon" />
Timeline
</Link>
<div className="app-bar-link-area">
<AppBarNavLink
link="/settings"
label="nav.settings"
onClick={collapse}
/>
<AppBarNavLink link="/about" label="nav.about" onClick={collapse} />
{hasAdministrationPermission && (
<AppBarNavLink
link="/admin"
label="nav.administration"
onClick={collapse}
/>
)}
</div>
<div className="app-bar-user-area">
{user != null ? (
<AppBarNavLink link="/" className="app-bar-avatar" onClick={collapse}>
<UserAvatar username={user.username} />
</AppBarNavLink>
) : (
<AppBarNavLink link="/login" label="nav.login" onClick={collapse} />
)}
</div>
{isMobile && (
<IconButton
icon="list"
color="light"
className="toggler"
onClick={toggleCollapse}
/>
)}
</nav>
);
}
|
