Proyectos de Subversion LeadersLinked - SPA

Rev

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

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