style: sidebar styling (#194)

* 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
2021-08-31 11:27:38 +02:00
parent 630791cd75
commit 28bbdfb2f6
13 changed files with 243 additions and 248 deletions
@@ -0,0 +1,85 @@
+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>
+  )
+}