-
Notifications
You must be signed in to change notification settings - Fork 12
/
AppsMenu.jsx
81 lines (77 loc) · 3.45 KB
/
AppsMenu.jsx
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
import React from 'react';
import { Link } from 'react-router-dom';
import { useLocation } from 'react-router';
import { Apps as AppsIcon , Web as MetadataBrowserIcon, Publish as ImportsIcon } from '@mui/icons-material';
import { Popper, ClickAwayListener, Tooltip, Grow, Paper, IconButton, Box, Typography } from '@mui/material';
import useToggle from '../../hooks/useToggle';
import OpenMRSLogo from '../common/OpenMRSLogo';
import { getOpenMRSURL } from '../../common/utils';
const AppsMenu = () => {
const open = useToggle()
const location = useLocation()
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target))
return;
open.setFalse()
};
const anchorRef = React.useRef(null);
return (
<React.Fragment>
<Tooltip arrow title="Apps menu">
<IconButton
className={open.value ? "app-menu-toggle selected" : "app-menu-toggle"}
style={{marginRight:"5px"}}
touch='true'
onClick={open.toggle}
ref={anchorRef}
size="large"
color={open.value ? 'primary' : 'default'}
>
<AppsIcon/>
</IconButton>
</Tooltip>
<Popper placement='bottom-end' open={open.value} anchorEl={anchorRef.current} role={undefined} transition disablePortal style={{zIndex: 1}}>
{({ TransitionProps }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:'right top',
}}
>
<Paper className="app-menu flex-vertical-center">
<ClickAwayListener onClickAway={handleClose}>
<Box className="app-container" display="flex" justifyContent="space-around">
<Link to="/" className='no-anchor-styles flex-vertical-center'>
<Box className={location.pathname !== "/imports" ? "app selected" : "app"} display="flex" flexDirection="column" alignItems="center">
<MetadataBrowserIcon fontSize="large"/>
<Typography style={{lineHeight:"1.2", marginTop:"15px"}} align="center" component="h6">
OCL <br/> TermBrowser
</Typography>
</Box>
</Link>
<a href={getOpenMRSURL()} className='no-anchor-styles flex-vertical-center'>
<Box className="app" display="flex" flexDirection="column" alignItems="center">
<OpenMRSLogo style={{width:"30px"}} />
<Typography style={{lineHeight:"1.2", marginTop:"15px"}} align="center" component="h6">
OpenMRS <br/> Dictionary <br/> Manager
</Typography>
</Box>
</a>
<Link to='/imports' className='no-anchor-styles flex-vertical-center' onClick={handleClose}>
<Box className={location.pathname == "/imports" ? "app selected" : "app"} display="flex" flexDirection="column" alignItems="center">
<ImportsIcon fontSize="large"/>
<Typography style={{lineHeight:"1.2", marginTop:"15px"}} align="center" component="h6">
Bulk <br/> Importer
</Typography>
</Box>
</Link>
</Box>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</React.Fragment>
);
}
export default AppsMenu;