text: import React from 'react';
  import clsx from 'clsx';
  import { makeStyles } from '@material-ui/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import Drawer from '@material-ui/core/Drawer';
  import Box from '@material-ui/core/Box';
  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 Badge from '@material-ui/core/Badge';
  import Container from '@material-ui/core/Container';
  import Grid from '@material-ui/core/Grid';
  import Paper from '@material-ui/core/Paper';
  import Link from '@material-ui/core/Link';
  import MenuIcon from '@material-ui/icons/Menu';
  import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
  import NotificationsIcon from '@material-ui/icons/Notifications';
  import Avatar from '@material-ui/icons/Notifications';
  import { IconBell, IconChevronUp, IconSearch } from '@tabler/icons';
  import seelogo from '../../assets/images/seelogo.png';
  // import Chart from './Chart';
  // import Deposits from './Deposits';
  // import Orders from './Orders';
  import Header from '../../components/Header';
  import Sidebar from '../../components/Sidebar';
  import Home from '../Home';
  import { Outlet } from 'react-router-dom';
  import { styled } from '@material-ui/core/styles';
  
  function Copyright() {
    return (
      <Typography variant="body2" color="textSecondary" align="center">
        {'Copyright © '}
        <Link color="inherit" href="https://material-ui.com/">
          Your Website
        </Link>
        {' '}
        {new Date().getFullYear()}
        .
      </Typography>
    );
  }
  
  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: 'center',
      border: 'none',
      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',
      backgroundColor: '#EFF1F5',
      paddingTop:"15px"
    },
    container: {
      paddingTop: theme.spacing(4),
      paddingBottom: theme.spacing(4),
    },
    paper: {
      padding: theme.spacing(2),
      display: 'flex',
      overflow: 'auto',
      flexDirection: 'column',
    },
    fixedHeight: {
      height: 240,
    },
    headerAvatar: {
      height: '10vh'
    },
  }));
  const DashboardLayoutRoot = styled('div')(
    ({ theme }) => ({
      backgroundColor: theme.palette.background.default,
      display: 'flex',
      height: '100%',
      overflow: 'hidden',
      width: '100%'
    })
  );
  
  const DashboardLayoutWrapper = styled('div')(
    ({ theme }) => ({
      display: 'flex',
      flex: '1 1 auto',
      overflow: 'hidden',
      paddingTop: 64,
      [theme.breakpoints.up('lg')]: {
        paddingLeft: 256
      }
    })
  );
  
  const DashboardLayoutContainer = styled('div')({
    display: 'flex',
    width:"100%",
    flex: '1 1 auto',
    overflow: 'hidden'
  });
  
  const DashboardLayoutContent = styled('div')({
    flex: '1 1 auto',
    height: '100%',
    overflow: 'auto'
  });
  export default function Dashboard(props) {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
  
    const handleDrawerOpen = () => {
      setOpen(true);
    };
    const handleDrawerClose = () => {
      //console.log('hyy');
      setOpen(false);
    };
    const handleToggleDrawer = () => {
      setOpen(open?false:true);
    };
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
    return (
    //   <div className={classes.root}>
    //   <Header
    //       handleToggleDrawer={handleToggleDrawer}
    //       open={open}
    //     />
    //   <Sidebar open={open} drawerWidth={drawerWidth} />
  
    //      <main className={classes.content}>
    //        <div className={classes.appBarSpacer} />
  
    //        {/* {props.children} */}
    //        <Outlet />
    //      </main>
    //     {/* <DashboardLayoutContainer>
    //       <DashboardLayoutContent>
    //         <Outlet />
    //       </DashboardLayoutContent>
    //     </DashboardLayoutContainer> */}
  
    // </div>
  
  
      <div className={classes.root}>
  
        <Header
          handleToggleDrawer={handleToggleDrawer}
          open={open}
        />
        {/* <Sidebar open={open} drawerWidth={drawerWidth} handleToggleDrawer={handleToggleDrawer} /> */}
       
        <main className={classes.content}>
          <div className={classes.appBarSpacer} />
  
          <Outlet />
        </main>
      </div>
    );
  }
  