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 from '@mui/icons-material/BookOutlined';
import CottageOutlined from '@mui/icons-material/CottageOutlined';
import PersonOutline from '@mui/icons-material/PersonOutline';
import SignalCellularAltOutlined from '@mui/icons-material/SignalCellularAltOutlined';

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

import { PageLayout } from '@shared/layouts';
import { ProvidersWrapper } from '@shared/providers';

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;
  }
`
);

const routes = [
  { label: 'Inicio', value: '/microlearning', icon: CottageOutlined },
  { label: 'Tópicos', value: '/microlearning/topics', icon: BookOutlined },
  {
    label: 'Progreso',
    value: '/microlearning/companies',
    icon: SignalCellularAltOutlined
  },
  { label: 'Perfil', value: '/microlearning/profile', icon: PersonOutline }
];

export function MicroLearningLayout() {
  const { pathname } = useLocation();
  const navigate = useNavigate();

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

        <Grid size={{ xs: 12, md: 8 }}>
          <ProvidersWrapper>
            <PageLayout>
              <Outlet />
            </PageLayout>
          </ProvidersWrapper>
        </Grid>
      </Grid>

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