Vojtech Simetka
28bbdfb2f6
* style: sidebar styling * style: hover and selected colors * chore: split the sidebar items into separate component * style: pretty much finished except for status button * feat: sidebar status button as a separate component * chore: spacing definition * style: size of the status text * fix: hiden navigation on small height screens
86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import { ReactElement, useContext } from 'react'
|
|
import { useLocation, matchPath } from 'react-router-dom'
|
|
import { ArrowRight } from 'react-feather'
|
|
|
|
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
|
|
import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
|
|
import { Context } from '../providers/Bee'
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
icon: {
|
|
color: 'inherit',
|
|
},
|
|
iconSmall: {
|
|
height: theme.spacing(2),
|
|
},
|
|
|
|
root: {
|
|
height: theme.spacing(4),
|
|
paddingLeft: theme.spacing(1),
|
|
paddingRight: theme.spacing(4),
|
|
color: '#f9f9f9',
|
|
borderLeft: '0px solid rgba(0,0,0,0)',
|
|
'&.Mui-selected, &.Mui-selected:hover': {
|
|
borderLeft: `0px solid ${theme.palette.primary.main}`,
|
|
backgroundColor: '#2c2c2c',
|
|
},
|
|
},
|
|
rootError: {
|
|
backgroundColor: 'rgba(255, 58, 82, 0.25)',
|
|
},
|
|
button: {
|
|
'&:hover': {
|
|
backgroundColor: '#2c2c2c',
|
|
|
|
// https://github.com/mui-org/material-ui/issues/22543
|
|
'@media (hover: none)': {
|
|
backgroundColor: '#2c2c2c',
|
|
},
|
|
},
|
|
},
|
|
smallerText: {
|
|
fontSize: '0.9rem',
|
|
},
|
|
}),
|
|
)
|
|
|
|
interface Props {
|
|
path?: string
|
|
}
|
|
|
|
export default function SideBarItem({ path }: Props): ReactElement {
|
|
const { status } = useContext(Context)
|
|
const classes = useStyles()
|
|
const location = useLocation()
|
|
const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
|
|
|
|
return (
|
|
<ListItem
|
|
button
|
|
classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
|
|
selected={isSelected}
|
|
disableRipple
|
|
>
|
|
<ListItemIcon>
|
|
<span
|
|
style={{
|
|
backgroundColor: status.all ? '#1de600' : '#ff3a52',
|
|
height: '14px',
|
|
width: '14px',
|
|
borderRadius: '50%',
|
|
display: 'inline-block',
|
|
marginLeft: 30,
|
|
}}
|
|
/>
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}
|
|
/>
|
|
<ListItemIcon className={classes.icon}>
|
|
{status.all ? null : <ArrowRight className={classes.iconSmall} />}
|
|
</ListItemIcon>
|
|
</ListItem>
|
|
)
|
|
}
|