mui-sidebar.js

import React, { useEffect, useState } from "react"
import {
  Grid,
  AppBar,
  Toolbar,
  Container,
  Divider,
  Paper,
  Drawer,
  Button,
  IconButton,
  Box,
  TextField,
} from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import { Close } from "@material-ui/icons"

export default function SEO({ open, onClose }) {
  const classes = useStyles()
  return (
    <Drawer
      className={classes.root}
      maxWidth="sm"
      anchor="right"
      open={open}
      variant="persistent"
      onClose={() => onClose(false)}
      PaperProps={{
        classes: {
          root: classes.paper,
        },
      }}
      ModalProps={{
        disableAutoFocus: true,
        disableEnforceFocus: true,
      }}
    >
      <Container maxWidth="sm">
        <Box display="flex" justifyContent="flex-end">
          <IconButton
            edge="end"
            color="default"
            aria-label="delete"
            onClick={() => onClose(false)}
          >
            <Close />
          </IconButton>
        </Box>
        <TextField autofocus fullWidth={true} label="Slug" />
        <Box  paddingTop={4} display="flex" justifyContent="flex-end">
          <Button edge="end" variant="outlined">Save</Button>
        </Box>
      </Container>
    </Drawer>
  )
}

const useStyles = makeStyles(theme => ({
  root: {},
  paper: {
    marginTop: "110px",
    paddingTop: theme.spacing(2),
    background: "#eceff1",
    width: "500px",
    height: "300px",
    border: "1px solid #b0bec5",
    boxShadow: "-2px 2px 6px -2px rgba(0,0,0,0.75)",
  },
}))