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 AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import List from '@material-ui/core/List';
  import CssBaseline from '@material-ui/core/CssBaseline';
  //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 DashboardIcon from '@material-ui/icons/Dashboard';
  import PermContactCalendarIcon from '@material-ui/icons/PermContactCalendar';
  import GroupIcon from '@material-ui/icons/Group';
  import FaceIcon from '@material-ui/icons/Face';
  import EventNoteIcon from '@material-ui/icons/EventNote';
  import AnnouncementIcon from '@material-ui/icons/Announcement';
  import GamesIcon from '@material-ui/icons/Games';
  import SettingsIcon from '@material-ui/icons/Settings';
  import '../assets/components/Nav.module.css';
  import { Grid, InputBase, Paper } from '@material-ui/core';
  import SearchIcon from '@material-ui/icons/Search';
  const drawerWidth = 240;
  
  const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
    },
    appBar: {
      zIndex: theme.zIndex.drawer + 1,
      transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
        backgroundColor: 'red',
      }),
    },
    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,
    },
    hide: {
      display: 'none',
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
      whiteSpace: 'nowrap',
    },
    drawerOpen: {
      width: drawerWidth,
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    drawerClose: {
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      overflowX: 'hidden',
      width: theme.spacing(7) + 1,
      [theme.breakpoints.up('sm')]: {
        width: theme.spacing(9) + 1,
      },
    },
    toolbar: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      padding: theme.spacing(0, 1),
      // necessary for content to be below app bar
      ...theme.mixins.toolbar,
    },
    content: {
      flexGrow: 1,
      padding: theme.spacing(3),
    },
  }));
  
  export default function MiniDrawer({children}) {
    const classes = useStyles();
    const theme = useTheme();
    const [open, setOpen] = React.useState(false);
  
    const handleDrawerOpen = () => {
      setOpen(true);
    };
  
    const handleDrawerClose = () => {
      setOpen(false);
    };
  
    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="fixed"
          className={clsx(classes.appBar, {
            [classes.appBarShift]: open,
          })}
        >
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              edge="start"
              className={clsx(classes.menuButton, {
                [classes.hide]: open,
              })}
            >
              <MenuIcon />
            </IconButton>
              <Grid  direction="row"
          justify="space-between"
          alignItems="center"
          spacing={2}>
                <Grid item xs={10} sm={6} >
                  <img src='logo.png' className='logo' alt='Logo'/>
                </Grid>
                <Grid item xs={10} sm={4}>
   
                  <Paper component="form" className='formulario'>
                    <InputBase
                      placeholder="Procurar"
                      inputProps={{ 'aria-label': 'Procurar', 'size': 23 }}
                    />
                    <IconButton type="submit" aria-label="search">
                      <SearchIcon />
                    </IconButton>
    
                  </Paper>
  
                </Grid>
              </Grid>
  
          </Toolbar>
        </AppBar>
  
        <Drawer
          variant="permanent"
          className={clsx(classes.drawer, {
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          })}
          classes={{
            paper: clsx({
              [classes.drawerOpen]: open,
              [classes.drawerClose]: !open,
            }),
          }}
        >
          <div className={classes.toolbar}>
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </div>
          <Divider />
          <List>
            <ListItem button>
                  <ListItemIcon><DashboardIcon /></ListItemIcon>
                  <ListItemText primary='Dashboard' />
            </ListItem>
            <ListItem button>
                  <ListItemIcon><PermContactCalendarIcon /></ListItemIcon>
                  <ListItemText primary='Contatos' />
            </ListItem>
            <ListItem button>
                  <ListItemIcon><GroupIcon /></ListItemIcon>
                  <ListItemText primary='Familias' />
            </ListItem>
            <ListItem button>
                  <ListItemIcon><FaceIcon /></ListItemIcon>
                  <ListItemText primary='Pacientes' />
            </ListItem>
          </List>
          <Divider />
          <List>
            <ListItem button>
                  <ListItemIcon><EventNoteIcon /></ListItemIcon>
                  <ListItemText primary='Agenda' />
            </ListItem>
            <ListItem button>
                  <ListItemIcon><AnnouncementIcon /></ListItemIcon>
                  <ListItemText primary='Avisos' />
            </ListItem>
            <ListItem button>
                  <ListItemIcon><GamesIcon /></ListItemIcon>
                  <ListItemText primary='Funcionalidades' />
            </ListItem>
  
          </List>
          <Divider />
          <List>
          <ListItem button>
                  <ListItemIcon><SettingsIcon /></ListItemIcon>
                  <ListItemText primary='Configurações' />
            </ListItem>
          </List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.toolbar} />
            {children}
        </main>
      </div>
    );
  }
  