Initial support for album browsing from UI

2020-01-22 12:46:09 -05:00
parent ea30b4c2d9
commit b23175e32b
6 changed files with 159 additions and 5 deletions
@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import List from '@material-ui/core/List'
+import MenuItem from '@material-ui/core/MenuItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import Typography from '@material-ui/core/Typography'
+import Divider from '@material-ui/core/Divider'
+import Collapse from '@material-ui/core/Collapse'
+import Tooltip from '@material-ui/core/Tooltip'
+import { makeStyles } from '@material-ui/core/styles'
+import { useTranslate } from 'react-admin'
+
+const useStyles = makeStyles((theme) => ({
+  icon: { minWidth: theme.spacing(5) },
+  sidebarIsOpen: {
+    paddingLeft: 25,
+    transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms'
+  },
+  sidebarIsClosed: {
+    paddingLeft: 0,
+    transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms'
+  }
+}))
+
+const SubMenu = ({
+  handleToggle,
+  sidebarIsOpen,
+  isOpen,
+  name,
+  icon,
+  children,
+  dense
+}) => {
+  const translate = useTranslate()
+  const classes = useStyles()
+
+  const header = (
+    <MenuItem dense={dense} button onClick={handleToggle}>
+      <ListItemIcon className={classes.icon}>
+        {isOpen ? <ExpandMore /> : icon}
+      </ListItemIcon>
+      <Typography variant="inherit" color="textSecondary">
+        {translate(name)}
+      </Typography>
+    </MenuItem>
+  )
+
+  return (
+    <Fragment>
+      {sidebarIsOpen || isOpen ? (
+        header
+      ) : (
+        <Tooltip title={translate(name)} placement="right">
+          {header}
+        </Tooltip>
+      )}
+      <Collapse in={isOpen} timeout="auto" unmountOnExit>
+        <List
+          dense={dense}
+          component="div"
+          disablePadding
+          className={
+            sidebarIsOpen ? classes.sidebarIsOpen : classes.sidebarIsClosed
+          }
+        >
+          {children}
+        </List>
+        <Divider />
+      </Collapse>
+    </Fragment>
+  )
+}
+
+export default SubMenu