import {
BottomNavigation,
BottomNavigationAction,
Box,
Drawer,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Toolbar,
} from '@mui/material';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import logoImage from '../assets/if-salas-logo.svg';
function MainMenu({ options, layoutType }) {
const navigate = useNavigate();
const [selectedOption, setSelectedOption] = useState(
options.find(option => option.isActive)
);
if (layoutType === 'desktop') {
return (
{options.map(option => (
{option.unselectedIcon}
))}
);
} else if (layoutType === 'mobile') {
return (
{
const newOption = options.find(option => option.id === newValue);
setSelectedOption(newOption);
navigate(newOption.pathname, { replace: true });
}}
showLabels
value={selectedOption.id}
>
{options.map(option => (
))}
);
}
}
const drawerWidth = 230;
const drawer = {
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
backgroundColor: 'secondary.main',
},
};
const toolbar = {
display: 'flex',
justifyContent: 'center',
padding: '20px 0',
};
const listItem = {
'> a': {
width: drawerWidth,
textDecoration: 'none',
color: 'white',
height: 'inherit',
},
'.Mui-selected': {
backgroundColor: '#003708',
borderLeft: '4px solid #ffffff',
},
};
const listItemIcon = {
color: 'white',
};
export default MainMenu;