-
Notifications
You must be signed in to change notification settings - Fork 583
/
index.tsx
executable file
·140 lines (131 loc) · 5.77 KB
/
index.tsx
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import React, { useMemo, useState, useEffect } from "react";
import { sortBy } from "lodash";
import { Drawer, DrawerContent, DrawerHeader } from "@webiny/ui/Drawer";
import { List, ListItem, ListItemGraphic } from "@webiny/ui/List";
import { IconButton } from "@webiny/ui/Button";
import { Icon } from "@webiny/ui/Icon";
import { css } from "emotion";
import { getPlugin, getPlugins } from "@webiny/plugins";
import { AdminMenuLogoPlugin, AdminMenuPlugin } from "@webiny/app-admin/types";
import { useNavigation, Menu, Item, Section } from "./components";
import { logoStyle, MenuFooter, MenuHeader, navContent, navHeader, subFooter } from "./Styled";
import { ReactComponent as MenuIcon } from "@webiny/app-admin/assets/icons/baseline-menu-24px.svg";
import { ReactComponent as DocsIcon } from "@webiny/app-admin/assets/icons/icon-documentation.svg";
import { ReactComponent as CommunityIcon } from "@webiny/app-admin/assets/icons/icon-community.svg";
import { ReactComponent as GithubIcon } from "@webiny/app-admin/assets/icons/github-brands.svg";
import { ReactComponent as InfoIcon } from "@webiny/app-admin/assets/icons/info.svg";
import ApiInformationDialog from "@webiny/app-admin/components/ApiInformationDialog";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-admin/navigation");
const style = {
environmentContainer: css({
color: "var(--mdc-theme-text-secondary-on-background)"
}),
infoContainer: css({
alignSelf: "center"
})
};
const Navigation = () => {
const { hideMenu, menuIsShown, initSections } = useNavigation();
const [infoOpened, setInfoOpened] = useState(false);
useEffect(initSections, []);
const logo = useMemo(() => {
const logoPlugin = getPlugin<AdminMenuLogoPlugin>("admin-menu-logo");
if (logoPlugin) {
return React.cloneElement(logoPlugin.render(), { className: logoStyle });
}
return null;
}, []);
const menus = [];
const menuPlugins = getPlugins<AdminMenuPlugin>("admin-menu");
// First we sort by order (default: 50), and then by plugin name. In other words, if order isn't defined,
// then we just sort by plugin name.
menuPlugins &&
sortBy(menuPlugins, [p => p.order || 50, p => p.name]).forEach(plugin => {
menus.push(
<React.Fragment key={plugin.name}>
{plugin.render({ Menu, Section, Item })}
</React.Fragment>
);
});
return (
<Drawer modal open={menuIsShown()} onClose={hideMenu}>
<DrawerHeader className={navHeader}>
<MenuHeader>
<IconButton icon={<MenuIcon />} onClick={hideMenu} />
{logo}
</MenuHeader>
</DrawerHeader>
<DrawerContent className={navContent}>{menus}</DrawerContent>
<MenuFooter>
<List nonInteractive>
<div
className={style.infoContainer}
onClick={e => {
e.preventDefault();
e.stopPropagation();
setInfoOpened(true);
}}
>
<ListItem ripple={false}>
<ListItemGraphic>
<Icon icon={<InfoIcon />} />
</ListItemGraphic>
{t`API information`}
</ListItem>
</div>
<a href="https://docs.webiny.com/" rel="noopener noreferrer" target="_blank">
<ListItem ripple={false}>
<ListItemGraphic>
<Icon icon={<DocsIcon />} />
</ListItemGraphic>
{t`Documentation`}
</ListItem>
</a>
<a
href="https://community.webiny.com/"
rel="noopener noreferrer"
target="_blank"
>
<ListItem ripple={false}>
<ListItemGraphic>
<Icon icon={<CommunityIcon />} />
</ListItemGraphic>
{t`Community`}
</ListItem>
</a>
<a
href="https://github.com/webiny/webiny-js"
rel="noopener noreferrer"
target="_blank"
>
<ListItem ripple={false}>
<ListItemGraphic>
<Icon icon={<GithubIcon />} />
</ListItemGraphic>
{t`Source`}
</ListItem>
</a>
<ListItem ripple={false} className={subFooter}>
<div>
<a
href="https://www.webiny.com/"
rel="noopener noreferrer"
target="_blank"
>
{t`Webiny.com`}
</a>
<p>
{t`© {year} Webiny Ltd, London, UK`({
year: new Date().getFullYear()
})}
</p>
</div>
</ListItem>
</List>
<ApiInformationDialog open={infoOpened} onClose={() => setInfoOpened(false)} />
</MenuFooter>
</Drawer>
);
};
export default Navigation;