text: import React from 'react';
  import clsx from 'clsx';
  import { makeStyles } from '@material-ui/core/styles';
  import Typography from '@material-ui/core/Typography';
  import AppBar from '@material-ui/core/AppBar';
  import Drawer from '@material-ui/core/Drawer';
  import { mainListItems } from './ListItems';
  import Toolbar from '@material-ui/core/Toolbar';
  import List from '@material-ui/core/List';
  import Divider from '@material-ui/core/Divider';
  import IconButton from '@material-ui/core/IconButton';
  import MenuIcon from '@material-ui/icons/Menu';
  import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
  
  const drawerWidth = 240;
  
  export const useStyles = makeStyles((theme) => ({
      root: {
        display: 'flex',
      },
      toolbar: {
        paddingRight: 24, // keep right padding when drawer closed
      },
      toolbarIcon: { // just the < square
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: '0 8px',
        ...theme.mixins.toolbar,
        backgroundColor: '#0B3948',
      },
      appBar: {
        zIndex: theme.zIndex.drawer + 1,
        transition: theme.transitions.create(['width', 'margin'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
        backgroundColor: '#0B3948', //dashboard bar
      },
      appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen,
        }),
      },
      menuButton: {
        marginRight: 36,
      },
      menuButtonHidden: {
        display: 'none',
      },
      title: {
        flexGrow: 1,
      },
      drawerPaper: {
        position: 'relative',
        whiteSpace: 'nowrap',
        width: drawerWidth,
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen,
        }),
        backgroundColor: '#416164', //Green on navbar
      },
      drawerPaperClose: {
        overflowX: 'hidden',
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.leavingScreen,
        }),
        width: theme.spacing(7),
        [theme.breakpoints.up('sm')]: {
          width: theme.spacing(9),
        },
      },
      appBarSpacer: theme.mixins.toolbar,
      content: {
        flexGrow: 1,
        height: '100vh',
        overflow: 'auto',
        backgroundColor: 'white', // bottom
      },
      container: {
        paddingTop: theme.spacing(4),
        paddingBottom: theme.spacing(4),
        backgroundColor: 'white', // holds all the boxes
      },
      paper: {
        padding: theme.spacing(2),
        display: 'flex',
        overflow: 'auto',
        flexDirection: 'column',
        backgroundColor: '#D0CDD7', //light purple 
      },
      fixedHeight: {
        height: 150,
      },
      listItems: {
          color:'white'
      },
      events: {
        cursor:'pointer',
        backgroundColor: '#416164',
        padding: 3,
      },
      eventDone: {
        cursor:'pointer',
        backgroundColor: '#939393',
        padding: 3,
        textDecoration: 'line-through !important',
        textDecorationColor: 'white !important',
        outline: 'none !important',
        border: 'none !important'
      },
      doneTitle : {
        textDecoration: 'line-through !important',
        textDecorationColor: 'black !important',
      },
      eventButtons: {
        float: 'right', 
        marginLeft: 15
      },
      dayPicker: {
        marginRight: '30px !important'
      },
      dayPickerSelected: {
        marginRight: '30px !important',
        color: 'white',
        backgroundColor: 'blue'
      }
    }));
  
  
  export function Navigation(props) {
      const classes = useStyles();
      const [open, setOpen] = React.useState(true);
      const handleDrawerOpen = () => {
          setOpen(true);
      };
      const handleDrawerClose = () => {
          setOpen(false);
      };
  
      return (
          <div className={classes.root}>
              <AppBar position="absolute" className={clsx(classes.appBar, open && classes.appBarShift)}>
                  <Toolbar className={classes.toolbar}>
                      <IconButton
                          edge="start"
                          color="inherit"
                          aria-label="open drawer"
                          onClick={handleDrawerOpen}
                          className={clsx(classes.menuButton, open && classes.menuButtonHidden)}
                      >
                          <MenuIcon />
                      </IconButton>
                      <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
                          {props.title}
                      </Typography>
                  </Toolbar>
              </AppBar>
              <Drawer
                  variant="permanent"
                  classes={{
                      paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
                  }}
                  open={open}
              >
                  <div className={classes.toolbarIcon}>
                      <IconButton onClick={handleDrawerClose} className={classes.listItems}>
                          <ChevronLeftIcon />
                      </IconButton>
                  </div>
                  <Divider />
                  <List>{mainListItems}</List>
              </Drawer>
          </div>
      );
  }
  
  export default Navigation;
  