Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2269 | Rev 3097 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1800 stevensc 1 
import React from 'react'
2 
import { Box, styled } from '@mui/material'
1774 stevensc 3 
 
1800 stevensc 4 
const CustomGrid = styled('div')(({ theme }) => ({
1775 stevensc 5 
  columnGap: '1rem',
6 
  display: 'grid',
1776 stevensc 7 
  gridTemplateColumns: '1fr',
1775 stevensc 8 
  gridTemplateRows: 'auto',
9 
  rowGap: '0.5rem',
1780 stevensc 10 
  gridTemplateAreas: '"main" "aside"',
1775 stevensc 11 
  [theme.breakpoints.up('sm')]: {
1780 stevensc 12 
    gridTemplateColumns: '1fr 2fr',
1779 stevensc 13 
    gridTemplateAreas: '"sidebar main" ". aside"'
1775 stevensc 14 
  },
15 
  [theme.breakpoints.up('md')]: {
2269 stevensc 16 
    gridTemplateColumns: '2fr 5fr  3fr',
1779 stevensc 17 
    gridTemplateAreas: '"sidebar main aside"'
1775 stevensc 18 
  }
19 
}))
20 
 
1800 stevensc 21 
const AppGrid = ({
22 
  renderSidebar = () => null,
23 
  renderMain = () => null,
24 
  renderAside = () => null
25 
}) => {
26 
  return (
27 
    <CustomGrid>
28 
      <Box
29 
        sx={{
30 
          position: 'relative',
31 
          flexDirection: 'column',
32 
          gap: 1,
33 
          height: 'fit-content',
34 
          display: { xs: 'none', sm: 'flex' },
1885 stevensc 35 
          gridArea: 'sidebar',
2963 stevensc 36 
          maxWidth: '100%',
37 
          overflow: 'hidden',
1936 stevensc 38 
          pb: 1
1800 stevensc 39 
        }}
40 
      >
41 
        {renderSidebar()}
42 
      </Box>
43 
      <Box
44 
        sx={{
45 
          display: 'flex',
46 
          flexDirection: 'column',
47 
          rowGap: 1,
1936 stevensc 48 
          gridArea: 'main',
2963 stevensc 49 
          maxWidth: '100%',
50 
          overflow: 'hidden',
1936 stevensc 51 
          pb: 1
1800 stevensc 52 
        }}
53 
      >
54 
        {renderMain()}
55 
      </Box>
56 
      <Box
57 
        sx={{
58 
          display: 'flex',
59 
          flexDirection: 'column',
60 
          gap: 1,
1885 stevensc 61 
          gridArea: 'aside',
2963 stevensc 62 
          maxWidth: '100%',
63 
          overflow: 'hidden',
1936 stevensc 64 
          pb: 1
1800 stevensc 65 
        }}
66 
      >
67 
        {renderAside()}
68 
      </Box>
69 
    </CustomGrid>
70 
  )
71 
}
72 
 
1774 stevensc 73 
export default AppGrid