text: import React from 'react';
  import { Outlet } from 'react-router-dom';
  import { styled } from '@material-ui/core/styles';
  import DashboardNavbar from './DashboardNavbar';
  
  const MainLayoutRoot = styled('div')(
    ({ theme }) => ({
      backgroundColor: theme.palette.background.default,
      display: 'flex',
      height: '135%',
      overflow: 'hidden',
      width: '100%',
    })
  );
  
  const MainLayoutWrapper = styled('div')({
    display: 'flex',
    flex: '1 1 auto',
    overflow: 'hidden',
    paddingTop: 64
  });
  
  const MainLayoutContainer = styled('div')({
    display: 'flex',
    flex: '1 1 auto',
    overflow: 'hidden'
  });
  
  const MainLayoutContent = styled('div')({
    flex: '1 1 auto',
    height: '100%',
    overflow: 'auto'
  });
  
  const MainLayout = () => (
    <MainLayoutRoot>
      <DashboardNavbar />
      <MainLayoutWrapper>
        <MainLayoutContainer>
          <MainLayoutContent>
            <Outlet />
          </MainLayoutContent>
        </MainLayoutContainer>
      </MainLayoutWrapper>
    </MainLayoutRoot>
  );
  
  export default MainLayout;
  