Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { NavLink } from 'react-router-dom'
import { Typography, styled } from '@mui/material'

import WidgetLayout from 'components/widgets/WidgetLayout'

const SideMenuContainer = styled(WidgetLayout)`
  padding: 1rem;
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    a.active {
      font-weight: 600;
    }
  }
`

const SideMenu = ({ items = [], onChange = null, title = '' }) => {
  const onClick = (e, value) => {
    if (onChange) {
      e.preventDefault()
      onChange(value)
    }
  }

  return (
    <SideMenuContainer>
      <Typography variant='h2'>{title}</Typography>
      <ul>
        {items.map(({ value, name }) => (
          <li key={value}>
            <NavLink exact to={value} onClick={(e) => onClick(e, value)}>
              {name}
            </NavLink>
          </li>
        ))}
      </ul>
    </SideMenuContainer>
  )
}

export default SideMenu