Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { NavLink, useNavigate, useLocation, Outlet } from 'react-router-dom';
import { Box, Grid, styled } from '@mui/material';
import {
  BookOutlined,
  CottageOutlined,
  HistoryOutlined,
  PersonOutline,
  SignalCellularAltOutlined
} from '@mui/icons-material';

import colors from '@styles/colors';
import SideMenu from '@components/UI/sidemenu/SideMenu';

const Navigation = styled(Box)(
  ({ theme }) => `
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: ${colors.main};
  padding: 1rem;
  display: none;
  z-index: 100;
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    li a {
        color: ${theme.palette.text.primary};
        display: flex;
        flex-direction: column;
        align-items: center;
        &.active {
          font-weight: 600;
        }
      }
  }
  ${theme.breakpoints.down('md')} {
    display: flex;
  }
`
);

export function MicroLearningLayout() {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  const routes = [
    { name: 'Inicio', value: '/microlearning', icon: CottageOutlined },
    { name: 'Tópicos', value: '/microlearning/topics', icon: BookOutlined },
    {
      name: 'Linea de tiempo',
      value: '/microlearning/timeline',
      icon: HistoryOutlined
    },
    {
      name: 'Progreso',
      value: '/microlearning/companies',
      icon: SignalCellularAltOutlined
    },
    { name: 'Perfil', value: '/microlearning/profile', icon: PersonOutline }
  ];

  return (
    <>
      <Grid container spacing={1}>
        <Grid
          item
          xs={12}
          md={4}
          sx={{
            display: { xs: 'none', md: 'block' }
          }}
        >
          <SideMenu items={routes} onChange={(value) => navigate(value)} current={pathname} />
        </Grid>

        <Grid item xs={12} md={8}>
          <Outlet />
        </Grid>
      </Grid>

      <Navigation sx={{ boxShadow: 2 }}>
        <ul>
          {routes.map(({ value, name, icon: Icon }) => (
            <li key={value}>
              <NavLink exact to={value}>
                <Icon />
                {name}
              </NavLink>
            </li>
          ))}
        </ul>
      </Navigation>
    </>
  );
}