85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
import { useState } from 'react';
|
|
import {
|
|
BottomNavigation,
|
|
BottomNavigationAction,
|
|
Box,
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Toolbar,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { NavLink, useNavigate } from 'react-router-dom';
|
|
import logoImage from '../../assets/if-salas-logo.svg';
|
|
import styles from './styles';
|
|
import { environmentNameDashAppVersion } from '../../utils/env';
|
|
|
|
function MainMenu({ options, layoutType }) {
|
|
const { menuContainer, envDashVersionTypography, navigator, item, itemIcon } =
|
|
styles[layoutType];
|
|
const navigate = useNavigate();
|
|
const [selectedOption, setSelectedOption] = useState(
|
|
options.find(option => option.isActive)
|
|
);
|
|
|
|
if (layoutType === 'desktop') {
|
|
return (
|
|
<Drawer sx={menuContainer} variant="permanent" anchor="left">
|
|
<Toolbar disableGutters sx={navigator}>
|
|
<img src={logoImage} width="70" alt="Logotipo" />
|
|
</Toolbar>
|
|
<List>
|
|
{options.map(option => (
|
|
<ListItem key={option.text} sx={item} disablePadding>
|
|
<NavLink to={option.pathname}>
|
|
<ListItemButton selected={option.isActive}>
|
|
<ListItemIcon sx={itemIcon}>
|
|
{option.unselectedIcon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={option.text} />
|
|
</ListItemButton>
|
|
</NavLink>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
|
|
<Typography sx={envDashVersionTypography} variant="body2">
|
|
{environmentNameDashAppVersion()}
|
|
</Typography>
|
|
</Drawer>
|
|
);
|
|
} else if (layoutType === 'mobile') {
|
|
return (
|
|
<Box sx={menuContainer}>
|
|
<BottomNavigation
|
|
onChange={(_, newValue) => {
|
|
const newOption = options.find(option => option.id === newValue);
|
|
setSelectedOption(newOption);
|
|
navigate(newOption.pathname);
|
|
}}
|
|
sx={navigator}
|
|
showLabels
|
|
value={selectedOption.id}
|
|
>
|
|
{options.map(option => (
|
|
<BottomNavigationAction
|
|
sx={item}
|
|
key={option.text}
|
|
label={option.text}
|
|
icon={
|
|
option.id === selectedOption.id
|
|
? option.selectedIcon
|
|
: option.unselectedIcon
|
|
}
|
|
/>
|
|
))}
|
|
</BottomNavigation>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MainMenu;
|