feat: replace drawer with slide to prevent content being under header

src/components/common/PinnedItems.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
+import PropTypes from 'prop-types'
 import { makeStyles, useTheme } from '@material-ui/core/styles';
-import Drawer from '@material-ui/core/Drawer';
+import { Box, Slide } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
+import VisibilityIcon from '@material-ui/icons/Visibility';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 
@@ -13,39 +14,14 @@ const useStyles = makeStyles((theme) => ({
  root: {
  display: 'flex',
  },
- appBar: {
- transition: theme.transitions.create(['margin', 'width'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- },
- appBarShift: {
- width: `calc(100% - ${drawerWidth}px)`,
- transition: theme.transitions.create(['margin', 'width'], {
- easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.enteringScreen,
- }),
- marginRight: drawerWidth,
- },
- title: {
- flexGrow: 1,
- },
- hide: {
- display: 'none',
- },
  drawer: {
  width: drawerWidth,
  flexShrink: 0,
  },
- drawerPaper: {
- width: drawerWidth,
- },
  drawerHeader: {
  display: 'flex',
  alignItems: 'center',
  padding: theme.spacing(0, 1),
- // necessary for content to be below app bar
- ...theme.mixins.toolbar,
  justifyContent: 'flex-start',
  },
  content: {
@@ -55,7 +31,6 @@ const useStyles = makeStyles((theme) => ({
  easing: theme.transitions.easing.sharp,
  duration: theme.transitions.duration.leavingScreen,
  }),
- marginRight: -drawerWidth,
  },
  contentShift: {
  transition: theme.transitions.create('margin', {
@@ -66,8 +41,7 @@ const useStyles = makeStyles((theme) => ({
  },
 }));
 
-// eslint-disable-next-line react/prop-types
-export default function PersistentDrawerRight({ children, content }) {
+export default function PersistentDrawerRight({ children, sideContent }) {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
@@ -80,6 +54,7 @@ export default function PersistentDrawerRight({ children, content }) {
  setOpen(false);
  };
 
+
  return (
  <div className={classes.root}>
  <main
@@ -93,35 +68,29 @@ export default function PersistentDrawerRight({ children, content }) {
  edge="end"
  onClick={handleDrawerOpen}
  >
- <MenuIcon />
+ <VisibilityIcon />
  </IconButton>
 
  <div className={classes.drawerHeader} />
- {content}
+ {children}
  </main>
- <Drawer
- className={classes.drawer}
- variant="persistent"
- anchor="right"
- open={open}
- classes={{
- paper: classes.drawerPaper,
- }}
- >
- <div className={classes.drawerHeader}>
- <IconButton onClick={handleDrawerClose}>
- {theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
- </IconButton>
- </div>
 
- <div className={classes.drawerHeader}>
- <IconButton onClick={handleDrawerClose}>
- {theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
- </IconButton>
- </div>
+ <Slide anchor="right" direction="left" in={open} mountOnEnter unmountOnExit>
+ <Box className={classes.drawer}>
+ <div className={classes.drawerHeader}>
+ <IconButton onClick={handleDrawerClose}>
+ {theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+ </IconButton>
+ </div>
 
- {children}
- </Drawer>
+ {sideContent}
+ </Box>
+ </Slide>
  </div>
  );
 }
+
+PersistentDrawerRight.propTypes = {
+ children: PropTypes.arrayOf(PropTypes.element).isRequired,
+ sideContent: PropTypes.arrayOf(PropTypes.element).isRequired,
+}

src/components/main/MainScreen.js

@@ -63,8 +63,8 @@ const MainScreen = () => {
  headerLeftContent={leftContent}
  headerRightContent={<HeaderRightContent id={mainId} />}
  >
- <PinnedItems content={content}>
- <Item id={parentId} pinnedOnly />
+ <PinnedItems sideContent={<Item id={parentId} pinnedOnly />}>
+ {content}
  </PinnedItems>
  </Main>
  );