Cédric FAMIBELLE-PRONZOLA
96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
import {useRef, useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/router'
|
|
import {Button, ListItemIcon, ListItemText, Menu, MenuItem, withStyles} from '@material-ui/core'
|
|
import PublicIcon from '@material-ui/icons/Public'
|
|
|
|
const StyledMenu = withStyles({
|
|
paper: {
|
|
border: '1px solid #d3d4d5'
|
|
}
|
|
})(props => (
|
|
<Menu
|
|
elevation={0}
|
|
getContentAnchorEl={null}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'center'
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'center'
|
|
}}
|
|
{...props}
|
|
/>
|
|
))
|
|
|
|
const StyledMenuItem = withStyles(theme => ({
|
|
root: {
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
|
|
color: theme.palette.common.white
|
|
}
|
|
}
|
|
}
|
|
}))(MenuItem)
|
|
|
|
const siteDomain = process.env.NEXT_PUBLIC_PROD_DOMAIN || 'localhost'
|
|
|
|
export default function RezoMenu({data}) {
|
|
const router = useRouter()
|
|
const [anchorElement, setAnchorElement] = useState(null)
|
|
const anchorRef = useRef(null)
|
|
|
|
const handleClick = event => {
|
|
setAnchorElement(event.currentTarget)
|
|
}
|
|
|
|
const handleClose = (rezo, link) => {
|
|
setAnchorElement(null)
|
|
if (typeof rezo === 'string' && !link) {
|
|
const url = `https://${rezo}.${siteDomain}`
|
|
router.push(url)
|
|
} else if (typeof rezo === 'string' && link) {
|
|
window.open(link, '_blank')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
ref={anchorRef}
|
|
startIcon={<PublicIcon />}
|
|
size='large'
|
|
aria-controls='customized-menu'
|
|
aria-haspopup='true'
|
|
variant='contained'
|
|
color='primary'
|
|
onClick={handleClick}
|
|
>
|
|
Rézo
|
|
</Button>
|
|
<StyledMenu
|
|
keepMounted
|
|
id='customized-menu'
|
|
anchorEl={anchorElement}
|
|
open={Boolean(anchorElement)}
|
|
onClose={handleClose}
|
|
>
|
|
{data.map(({id, tit, icon, link}) => (
|
|
<StyledMenuItem key={id} onClick={() => handleClose(id, link)}>
|
|
<ListItemIcon>
|
|
{icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={tit} />
|
|
</StyledMenuItem>
|
|
))}
|
|
</StyledMenu>
|
|
</>
|
|
)
|
|
}
|
|
|
|
RezoMenu.propTypes = {
|
|
data: PropTypes.array.isRequired
|
|
}
|