Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Box, styled } from '@mui/material'

const CustomGrid = styled('div')(({ theme }) => ({
  columnGap: '1rem',
  display: 'grid',
  gridTemplateColumns: '1fr',
  gridTemplateRows: 'auto',
  rowGap: '0.5rem',
  gridTemplateAreas: '"main" "aside"',
  [theme.breakpoints.up('sm')]: {
    gridTemplateColumns: '1fr 2fr',
    gridTemplateAreas: '"sidebar main" ". aside"'
  },
  [theme.breakpoints.up('md')]: {
    gridTemplateColumns: '2fr 5fr  3fr',
    gridTemplateAreas: '"sidebar main aside"'
  }
}))

const AppGrid = ({
  renderSidebar = () => null,
  renderMain = () => null,
  renderAside = () => null
}) => {
  return (
    <CustomGrid>
      <Box
        sx={{
          position: 'relative',
          flexDirection: 'column',
          gap: 1,
          height: 'fit-content',
          display: { xs: 'none', sm: 'flex' },
          gridArea: 'sidebar',
          maxWidth: '100%',
          overflow: 'hidden',
          pb: 1
        }}
      >
        {renderSidebar()}
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          rowGap: 1,
          gridArea: 'main',
          maxWidth: '100%',
          overflow: 'hidden',
          pb: 1
        }}
      >
        {renderMain()}
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: 1,
          gridArea: 'aside',
          maxWidth: '100%',
          overflow: 'hidden',
          pb: 1
        }}
      >
        {renderAside()}
      </Box>
    </CustomGrid>
  )
}

export default AppGrid