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