Cédric FAMIBELLE-PRONZOLA
122 lines
2.7 KiB
JavaScript
122 lines
2.7 KiB
JavaScript
import {useRef, useState} from 'react'
|
|
import {styled} from '@mui/material/styles'
|
|
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/router'
|
|
import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@mui/material'
|
|
import PublicIcon from '@mui/icons-material/Public'
|
|
|
|
const PREFIX = 'rezo-menu'
|
|
|
|
const classes = {
|
|
paper: `${PREFIX}-paper`,
|
|
root: `${PREFIX}-root`
|
|
}
|
|
|
|
const Root = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`& .${classes.paper}`]: {
|
|
border: '1px solid #d3d4d5'
|
|
},
|
|
|
|
[`& .${classes.root}`]: {
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
|
|
color: theme.palette.common.white
|
|
}
|
|
}
|
|
}
|
|
}))
|
|
|
|
function StyledMenu(props) {
|
|
return (
|
|
<Menu
|
|
elevation={0}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'center'
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'center'
|
|
}}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const StyledMenuItem = 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 (
|
|
(
|
|
<Root>
|
|
<Button
|
|
ref={anchorRef}
|
|
startIcon={<PublicIcon />}
|
|
size='small'
|
|
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)}
|
|
classes={{
|
|
paper: classes.paper
|
|
}}
|
|
onClose={handleClose}
|
|
>
|
|
{data.map(({id, tit, icon, link}) => (
|
|
<StyledMenuItem
|
|
key={id}
|
|
classes={{
|
|
root: classes.root
|
|
}}
|
|
onClick={() => handleClose(id, link)}
|
|
>
|
|
<ListItemIcon>
|
|
{icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={tit} />
|
|
</StyledMenuItem>
|
|
))}
|
|
</StyledMenu>
|
|
</Root>
|
|
)
|
|
)
|
|
}
|
|
|
|
RezoMenu.propTypes = {
|
|
data: PropTypes.array.isRequired
|
|
}
|