Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { NavLink as Link, useMatch } from 'react-router-dom'
import {
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText
} from '@mui/material'

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

export default function Menu({ children }) {
  return (
    <Widget
      styles={{
        position: { xs: 'fixed', md: 'relative' },
        bottom: { xs: 0, md: 'auto' },
        left: { xs: 0, md: 'auto' },
        zIndex: { xs: 1100, md: 0 },
        borderWidth: '1px 0 0'
      }}
    >
      <List
        sx={{
          display: 'flex',
          flexDirection: { xs: 'row', md: 'column' },
          width: '100%',

          gap: ({ spacing }) => spacing(0.5)
        }}
      >
        {children}
      </List>
    </Widget>
  )
}

function MenuItem({ to, icon, label, onClick }) {
  const match = useMatch(to)

  return (
    <ListItem sx={{ display: match ? 'none' : 'flex' }}>
      <ListItemButton LinkComponent={Link} to={to} onClick={onClick}>
        {icon && <ListItemIcon>{icon}</ListItemIcon>}
        <ListItemText
          primary={label}
          sx={{ textAlign: { xs: 'center', md: 'start' } }}
        />
      </ListItemButton>
    </ListItem>
  )
}

Menu.Item = MenuItem