Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3697 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React from 'react';
2 
import { NavLink, useNavigate, useLocation, Outlet } from 'react-router-dom';
3 
import { Box, Grid, styled } from '@mui/material';
4 
import BookOutlined from '@mui/icons-material/BookOutlined';
5 
import CottageOutlined from '@mui/icons-material/CottageOutlined';
6 
import PersonOutline from '@mui/icons-material/PersonOutline';
7 
import SignalCellularAltOutlined from '@mui/icons-material/SignalCellularAltOutlined';
8 
 
9 
import colors from '@styles/config/colors';
10 
import SideMenu from '@components/UI/sidemenu/SideMenu';
11 
 
12 
import { PageLayout } from '@shared/layouts';
13 
import { ProvidersWrapper } from '@shared/providers';
14 
 
15 
const Navigation = styled(Box)(
16 
  ({ theme }) => `
17 
  position: fixed;
18 
  bottom: 0;
19 
  left: 0;
20 
  width: 100%;
21 
  background-color: ${colors.main};
22 
  padding: 1rem;
23 
  display: none;
24 
  z-index: 100;
25 
  ul {
26 
    display: flex;
27 
    align-items: center;
28 
    justify-content: space-between;
29 
    gap: 1rem;
30 
    width: 100%;
31 
    li a {
32 
        color: ${theme.palette.text.primary};
33 
        display: flex;
34 
        flex-direction: column;
35 
        align-items: center;
36 
        &.active {
37 
          font-weight: 600;
38 
        }
39 
      }
40 
  }
41 
  ${theme.breakpoints.down('md')} {
42 
    display: flex;
43 
  }
44 
`
45 
);
46 
 
47 
const routes = [
48 
  { label: 'Inicio', value: '/microlearning', icon: CottageOutlined },
49 
  { label: 'Tópicos', value: '/microlearning/topics', icon: BookOutlined },
50 
  {
51 
    label: 'Progreso',
52 
    value: '/microlearning/companies',
53 
    icon: SignalCellularAltOutlined
54 
  },
55 
  { label: 'Perfil', value: '/microlearning/profile', icon: PersonOutline }
56 
];
57 
 
58 
export function MicroLearningLayout() {
59 
  const { pathname } = useLocation();
60 
  const navigate = useNavigate();
61 
 
62 
  return (
63 
    <>
64 
      <Grid container spacing={1}>
65 
        <Grid size={{ xs: 12, md: 4 }} sx={{ display: { xs: 'none', md: 'block' } }}>
66 
          <SideMenu items={routes} onChange={(value) => navigate(value)} current={pathname} />
67 
        </Grid>
68 
 
69 
        <Grid size={{ xs: 12, md: 8 }}>
70 
          <ProvidersWrapper>
71 
            <PageLayout>
72 
              <Outlet />
73 
            </PageLayout>
74 
          </ProvidersWrapper>
75 
        </Grid>
76 
      </Grid>
77 
 
78 
      <Navigation sx={{ boxShadow: 2 }}>
79 
        <ul>
80 
          {routes.map(({ value, label, icon: Icon }) => (
81 
            <li key={value}>
82 
              <NavLink exact to={value}>
83 
                <Icon />
84 
                {label}
85 
              </NavLink>
86 
            </li>
87 
          ))}
88 
        </ul>
89 
      </Navigation>
90 
    </>
91 
  );
92 
}