text: import React from 'react';
  import clsx from 'clsx';
  import { makeStyles, useTheme } from '@material-ui/core/styles';
  import Drawer from '@material-ui/core/Drawer';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import List from '@material-ui/core/List';
  import Typography from '@material-ui/core/Typography';
  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';
  import ChevronRightIcon from '@material-ui/icons/ChevronRight';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemIcon from '@material-ui/core/ListItemIcon';
  import ListItemText from '@material-ui/core/ListItemText';
  import InboxIcon from '@material-ui/icons/MoveToInbox';
  import MailIcon from '@material-ui/icons/Mail';
  import { BrowserRouter as Router} from "react-router-dom";
  import {ChevronLeft, ChevronRight, Menu} from "@material-ui/icons";
  import {Routes} from "./Routes/Routes";
  import NavLink from "./Menu/Nav";
  
  const drawerWidth = 200;
  
  const useStyles = makeStyles((theme) => ({
      root: {
          display: 'flex',
      },
      backdrop: {
          zIndex: theme.zIndex.drawer + 1,
          color: '#fff',
      },
      textRoot: {
          background: "white"
      },
      input: {
          color: "black"
      },
      searchSize: {
          width: 500,
          '& > * + *': {
              marginTop: theme.spacing(2),
          },
      },
  
      appBar: {
          transition: theme.transitions.create(['margin', 'width'], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
      },
      appBarShift: {
          width: `calc(100% - ${drawerWidth}px)`,
          marginLeft: drawerWidth,
          transition: theme.transitions.create(['margin', 'width'], {
              easing: theme.transitions.easing.easeOut,
              duration: theme.transitions.duration.enteringScreen,
          }),
      },
      menuButton: {
          marginRight: theme.spacing(2),
      },
      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-end',
      },
      content: {
          flexGrow: 1,
          padding: theme.spacing(3),
          transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
          marginLeft: -drawerWidth,
      },
      contentShift: {
          transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.easeOut,
              duration: theme.transitions.duration.enteringScreen,
          }),
          marginLeft: 0,
      },
  }));
  function App() {
  
      const classes = useStyles();
      const theme = useTheme();
      const [drawerOpen, setDrawerOpen] = React.useState(false);
  
    return (
      <div className="App">
          <div className={classes.root}>
              <CssBaseline />
              <AppBar
                  position="fixed"
                  className={clsx(classes.appBar, {
                      [classes.appBarShift]: drawerOpen,
                  })}
                  style={{ background: '#842210' }}
              >
                  <Toolbar>
                      <IconButton
                          color="inherit"
                          aria-label="open drawer"
                          onClick={e =>{setDrawerOpen(true)}}
                          edge="start"
                          className={clsx(classes.menuButton, drawerOpen && classes.hide)}
                      >
                          <Menu/>
                      </IconButton>
                  </Toolbar>
              </AppBar>
              <Router>
                  <Drawer
                      className={classes.drawer}
                      variant="persistent"
                      anchor="left"
                      open={drawerOpen}
                      classes={{
                          paper: classes.drawerPaper,
                      }}
                  >
                      <div className={classes.toolbar} />
                      <IconButton onClick={e=>{setDrawerOpen(false)}}>
                          <Typography>Hide </Typography>
                          {theme.direction === 'ltr' ? <ChevronLeft /> : <ChevronRight />}
                      </IconButton>
                      <Divider />
  
                      <NavLink/>
                  </Drawer>
                  <main
                      className={clsx(classes.content, {
                          [classes.contentShift]: drawerOpen,
                      })}
                  >
                      <div className={classes.drawerHeader}/>
  
                      {Routes()}
                  </main>
              </Router>
  
              <main
                  className={clsx(classes.content, {
                      [classes.contentShift]: drawerOpen,
                  })}
              >
                  <div className={classes.drawerHeader} />
  
              </main>
          </div>
      </div>
    );
  }
  
  export default App;
  