text: import React from "react";
  import clsx from "clsx";
  import { makeStyles } from "@material-ui/core/styles";
  import {
      CssBaseline,
      Drawer,
      AppBar,
      Toolbar,
      List,
      Typography,
      Divider,
      IconButton,
      Container
  } from "@material-ui/core";
  
  import logo from "./img/logo.png";
  
  //icon
  import MenuIcon from "@material-ui/icons/Menu";
  import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
  import {
      mainListItems,
      secondaryListItems
  } from "./components/dashboard/ListItem";
  import { Switch, Route } from "react-router-dom";
  import Dashboard from "./page/Dashboard";
  import Profile from "./page/Profile";
  
  const drawerWidth = 240;
  
  const useStyles = makeStyles(theme => ({
      root: {
          display: "flex"
      },
      toolbar: {
          paddingRight: 24 // keep right padding when drawer closed
      },
      toolbarIcon: {
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-end",
          padding: "0 8px",
          ...theme.mixins.toolbar
      },
      appBar: {
          zIndex: theme.zIndex.drawer + 1,
          transition: theme.transitions.create(["width", "margin"], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen
          })
      },
      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
          })
      },
      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"
      },
      container: {
          paddingTop: theme.spacing(4),
          paddingBottom: theme.spacing(4)
      },
      paper: {
          padding: theme.spacing(2),
          display: "flex",
          overflow: "auto",
          flexDirection: "column"
      },
      fixedHeight: {
          height: 240
      }
  }));
  
  export default function App() {
      const classes = useStyles();
      const [open, setOpen] = React.useState(true);
      const handleDrawerOpen = () => {
          setOpen(true);
      };
      const handleDrawerClose = () => {
          setOpen(false);
      };
  
      return (
          <div className={classes.root}>
              <CssBaseline />
              <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>
                      <img src={logo} width="150px" />
                      {/* <Typography
                          component="h1"
                          variant="h6"
                          color="inherit"
                          noWrap
                          className={classes.title}
                      >
                          RESUMER
                      </Typography> */}
                  </Toolbar>
              </AppBar>
              <Drawer
                  variant="permanent"
                  classes={{
                      paper: clsx(
                          classes.drawerPaper,
                          !open && classes.drawerPaperClose
                      )
                  }}
                  open={open}
              >
                  <div className={classes.toolbarIcon}>
                      <IconButton onClick={handleDrawerClose}>
                          <ChevronLeftIcon />
                      </IconButton>
                  </div>
                  <Divider />
                  <List>{mainListItems}</List>
                  <Divider />
                  <List>{secondaryListItems}</List>
              </Drawer>
              <main className={classes.content}>
                  <div className={classes.appBarSpacer} />
                  <Container maxWidth="lg" className={classes.container}>
                      <Switch>
                          {/* <Route exact path="/" component={Dashboard} /> */}
                          <Route exact path="/profile" component={Profile} />
                      </Switch>
                  </Container>
              </main>
          </div>
      );
  }
  