68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/router'
|
|
|
|
import {makeStyles} from '@material-ui/core/styles'
|
|
import {List, ListItem, ListItemText} from '@material-ui/core'
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
root: {
|
|
width: '100%',
|
|
maxWidth: 360,
|
|
backgroundColor: theme.palette.background.paper
|
|
}
|
|
}))
|
|
|
|
export default function MizikLis({setMobileOpen, hasAwtis, miziks, selectedMizikSlug, setSelectedMizikSlug}) {
|
|
const classes = useStyles()
|
|
const router = useRouter()
|
|
|
|
const handleClick = slug => {
|
|
if (setSelectedMizikSlug) {
|
|
setSelectedMizikSlug(slug)
|
|
}
|
|
|
|
if (slug !== selectedMizikSlug) {
|
|
if (hasAwtis) {
|
|
router.push(`/teks/${slug}`)
|
|
} else {
|
|
router.push(`/teks/${slug}#${slug}`)
|
|
}
|
|
}
|
|
|
|
if (setMobileOpen) {
|
|
setMobileOpen(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<List component='nav' className={classes.root} aria-label='mizik'>
|
|
{miziks.map(({slug, titre, awtis}) => (
|
|
<ListItem
|
|
key={slug}
|
|
button
|
|
id={slug}
|
|
selected={selectedMizikSlug === slug}
|
|
onClick={() => handleClick(slug)}
|
|
>
|
|
<ListItemText primary={titre} secondary={hasAwtis ? awtis.map(a => a.alias).join() : null} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
)
|
|
}
|
|
|
|
MizikLis.propTypes = {
|
|
setMobileOpen: PropTypes.func,
|
|
hasAwtis: PropTypes.bool,
|
|
miziks: PropTypes.array.isRequired,
|
|
selectedMizikSlug: PropTypes.string,
|
|
setSelectedMizikSlug: PropTypes.func
|
|
}
|
|
|
|
MizikLis.defaultProps = {
|
|
setMobileOpen: null,
|
|
hasAwtis: false,
|
|
selectedMizikSlug: null,
|
|
setSelectedMizikSlug: null
|
|
}
|