Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3481 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/colors';
13 
import SideMenu from '@components/UI/sidemenu/SideMenu';
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 
 
3505 stevensc 47 
export function MicroLearningLayout() {
3481 stevensc 48 
  const { pathname } = useLocation();
49 
  const navigate = useNavigate();
50 
  const routes = [
51 
    { name: 'Inicio', value: '/microlearning', icon: CottageOutlined },
3488 stevensc 52 
    { name: 'Tópicos', value: '/microlearning/topics', icon: BookOutlined },
3481 stevensc 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 
  return (
67 
    <>
68 
      <Grid container spacing={1}>
69 
        <Grid
70 
          item
71 
          xs={12}
72 
          md={4}
73 
          sx={{
74 
            display: { xs: 'none', md: 'block' }
75 
          }}
76 
        >
77 
          <SideMenu items={routes} onChange={(value) => navigate(value)} current={pathname} />
78 
        </Grid>
79 
 
80 
        <Grid item xs={12} md={8}>
81 
          <Outlet />
82 
        </Grid>
83 
      </Grid>
84 
 
85 
      <Navigation sx={{ boxShadow: 2 }}>
86 
        <ul>
87 
          {routes.map(({ value, name, icon: Icon }) => (
88 
            <li key={value}>
89 
              <NavLink exact to={value}>
90 
                <Icon />
91 
                {name}
92 
              </NavLink>
93 
            </li>
94 
          ))}
95 
        </ul>
96 
      </Navigation>
97 
    </>
98 
  );
3505 stevensc 99 
}