Proyectos de Subversion LeadersLinked - SPA

Rev

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