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 ( Logotipo {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;