Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { NavLink as Link, useRouteMatch, NavLink } from 'react-router-dom'
import {
  Box,
  Collapse,
  List,
  ListItemButton,
  ListItemText,
  styled
} from '@mui/material'
import {
  ExpandLess,
  ExpandMore,
  EventRepeat,
  MoveUp,
  TrackChanges
} from '@mui/icons-material'

import Widget from '@app/components/UI/Widget'

const Navigation = styled(Box)(
  ({ theme }) => `
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: ${theme.palette.background.default};
  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 default function HabitsMenu() {
  const { url } = useRouteMatch()
  const [open, setOpen] = useState(false)

  const handleClick = () => setOpen(!open)

  const routes = [
    { name: 'Hábitos', value: '/habits', icon: <EventRepeat /> },
    { name: 'Metas', value: '/goals', icon: <MoveUp /> },
    { name: 'Propósitos', value: '/purposes', icon: <TrackChanges /> }
  ]

  return (
    <>
      <Widget styles={{ display: { xs: 'none', md: 'block' } }}>
        <List
          sx={{
            '& .MuiListItemButton-root.active .MuiTypography-body1': {
              fontWeight: '600'
            }
          }}
        >
          <ListItemButton LinkComponent={Link} to={url} exact>
            <ListItemText primary='Habitos' />
          </ListItemButton>

          <ListItemButton LinkComponent={Link} to={`${url}/goals`} exact>
            <ListItemText primary='Metas' />
          </ListItemButton>

          <ListItemButton onClick={handleClick}>
            <ListItemText primary='Propósitos' />
            {open ? <ExpandLess /> : <ExpandMore />}
          </ListItemButton>

          <Collapse in={open} timeout='auto' unmountOnExit>
            <List disablePadding>
              <ListItemButton
                sx={{ pl: 4 }}
                LinkComponent={Link}
                to={`${url}/purposes`}
              >
                <ListItemText primary='Propósito' />
              </ListItemButton>
              <ListItemButton
                sx={{ pl: 4 }}
                LinkComponent={Link}
                to={`${url}/paradigms`}
              >
                <ListItemText primary='Paradigmas' />
              </ListItemButton>
              <ListItemButton
                sx={{ pl: 4 }}
                LinkComponent={Link}
                to={`${url}/values`}
              >
                <ListItemText primary='Valores' />
              </ListItemButton>
            </List>
          </Collapse>
        </List>
      </Widget>
      <Navigation sx={{ boxShadow: 2 }}>
        <ul>
          {routes.map(({ value, name, icon }) => (
            <li key={value}>
              <NavLink exact to={value}>
                {icon}
                {name}
              </NavLink>
            </li>
          ))}
        </ul>
      </Navigation>
    </>
  )
}