Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1781 | Rev 1885 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1781 Rev 1800
Línea -... Línea 1...
- 
 
 1 
import React from 'react'
1 
import { styled } from '@mui/material'
 2 
import { Box, styled } from '@mui/material'
Línea 2... Línea 3...
2 
 
 3 
 
3 
const AppGrid = styled('div')(({ theme }) => ({
 4 
const CustomGrid = styled('div')(({ theme }) => ({
4 
  columnGap: '1rem',
 5 
  columnGap: '1rem',
5 
  display: 'grid',
 6 
  display: 'grid',
6 
  gridTemplateColumns: '1fr',
 7 
  gridTemplateColumns: '1fr',
7 
  gridTemplateRows: 'auto',
 8 
  gridTemplateRows: 'auto',
Línea 15... Línea 16...
15 
    gridTemplateColumns: '1.5fr 4fr  2fr',
 16 
    gridTemplateColumns: '1.5fr 4fr  2fr',
16 
    gridTemplateAreas: '"sidebar main aside"'
 17 
    gridTemplateAreas: '"sidebar main aside"'
17 
  }
 18 
  }
18 
}))
 19 
}))
Línea -... Línea 20...
- 
 
 20 
 
- 
 
 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' },
- 
 
 35 
          gridArea: 'sidebar'
- 
 
 36 
        }}
- 
 
 37 
      >
- 
 
 38 
        {renderSidebar()}
- 
 
 39 
      </Box>
- 
 
 40 
      <Box
- 
 
 41 
        sx={{
- 
 
 42 
          display: 'flex',
- 
 
 43 
          flexDirection: 'column',
- 
 
 44 
          rowGap: 1,
- 
 
 45 
          gridArea: 'main'
- 
 
 46 
        }}
- 
 
 47 
      >
- 
 
 48 
        {renderMain()}
- 
 
 49 
      </Box>
- 
 
 50 
      <Box
- 
 
 51 
        sx={{
- 
 
 52 
          display: 'flex',
- 
 
 53 
          flexDirection: 'column',
- 
 
 54 
          gap: 1,
- 
 
 55 
          gridArea: 'aside'
- 
 
 56 
        }}
- 
 
 57 
      >
- 
 
 58 
        {renderAside()}
- 
 
 59 
      </Box>
- 
 
 60 
    </CustomGrid>
- 
 
 61 
  )
- 
 
 62 
}
19 
 
 63