Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3098 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3098 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { Box, styled } from '@mui/material'
 2 
import { Box, styled } from '@mui/material';
3 
 
 3 
 
4 
const CustomGrid = styled('div')(({ theme }) => ({
 4 
const CustomGrid = styled('div')(({ theme }) => ({
5 
  columnGap: '1rem',
 5 
  columnGap: '1rem',
6 
  display: 'grid',
 6 
  display: 'grid',
7 
  gridTemplateColumns: '1fr',
 7 
  gridTemplateColumns: '1fr',
8 
  gridTemplateRows: 'auto',
 8 
  gridTemplateRows: 'auto',
9 
  rowGap: '0.5rem',
 9 
  rowGap: '0.5rem',
10 
  gridTemplateAreas: '"main" "aside"',
 10 
  gridTemplateAreas: '"main" "aside"',
11 
  [theme.breakpoints.up('sm')]: {
 11 
  [theme.breakpoints.up('sm')]: {
12 
    gridTemplateColumns: '1fr 2fr',
 12 
    gridTemplateColumns: '1fr 2fr',
13 
    gridTemplateAreas: '"sidebar main" ". aside"'
 13 
    gridTemplateAreas: '"sidebar main" ". aside"'
14 
  },
 14 
  },
15 
  [theme.breakpoints.up('md')]: {
 15 
  [theme.breakpoints.up('md')]: {
16 
    gridTemplateColumns: '2fr 5fr  3fr',
 16 
    gridTemplateColumns: '2fr 5fr  3fr',
17 
    gridTemplateAreas: '"sidebar main aside"'
 17 
    gridTemplateAreas: '"sidebar main aside"'
18 
  }
 18 
  }
19 
}))
 19 
}));
20 
 
 20 
 
21 
const CustomColumn = styled(Box)(({ theme }) => ({
 21 
const CustomColumn = styled(Box)(({ theme }) => ({
22 
  position: 'relative',
 22 
  position: 'relative',
23 
  height: 'fit-content',
 23 
  height: 'fit-content',
24 
  display: 'grid',
 24 
  display: 'grid',
25 
  gap: theme.spacing(0.5),
 25 
  gap: theme.spacing(0.5),
26 
  overflow: 'hidden'
 26 
  overflow: 'hidden'
27 
}))
 27 
}));
28 
 
 28 
 
29 
const AppGrid = ({
 29 
const AppGrid = ({
30 
  renderSidebar = () => null,
 30 
  renderSidebar = () => null,
31 
  renderMain = () => null,
 31 
  renderMain = () => null,
32 
  renderAside = () => null
 32 
  renderAside = () => null
33 
}) => {
 33 
}) => {
34 
  return (
 34 
  return (
35 
    <CustomGrid>
 35 
    <CustomGrid>
36 
      <CustomColumn
 36 
      <CustomColumn
37 
        sx={{
 37 
        sx={{
38 
          display: { xs: 'none', sm: 'grid' },
 38 
          display: { xs: 'none', sm: 'grid' },
39 
          gridArea: 'sidebar'
 39 
          gridArea: 'sidebar'
40 
        }}
 40 
        }}
41 
      >
 41 
      >
42 
        {renderSidebar()}
 42 
        {renderSidebar()}
43 
      </CustomColumn>
 43 
      </CustomColumn>
44 
      <CustomColumn sx={{ gridArea: 'main' }}>{renderMain()}</CustomColumn>
 44 
      <CustomColumn sx={{ gridArea: 'main' }}>{renderMain()}</CustomColumn>
45 
      <CustomColumn sx={{ gridArea: 'aside' }}>{renderAside()}</CustomColumn>
 45 
      <CustomColumn sx={{ gridArea: 'aside' }}>{renderAside()}</CustomColumn>
46 
    </CustomGrid>
 46 
    </CustomGrid>
47 
  )
 47 
  );
48 
}
 48 
};
49 
 
 49 
 
50 
export default AppGrid
 50 
export default AppGrid;