|  |  | import * as React from 'react'; | 
						
						
						
							|  |  | import {Link} from 'react-router-dom'; | 
						
						
						
							|  |  | import { styled } from '@mui/material/styles'; | 
						
						
						
							|  |  | import Button from '@mui/material/Button'; | 
						
						
						
							|  |  | import Menu from '@mui/material/Menu'; | 
						
						
						
							|  |  | import MenuItem from '@mui/material/MenuItem'; | 
						
						
						
							|  |  | import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; | 
						
						
						
							|  |  | import {connect} from 'react-redux'; | 
						
						
						
							|  |  | import { publicApi } from '../../redux/actions'; | 
						
						
						
							|  |  | 
 | 
						
						
						
							|  |  | const StyledMenu = styled((props) => ( | 
						
						
						
							|  |  |   <Menu | 
						
						
						
							|  |  |     elevation={0} | 
						
						
						
							|  |  |     anchorOrigin={{ | 
						
						
						
							|  |  |       vertical: 'bottom', | 
						
						
						
							|  |  |       horizontal: 'center', | 
						
						
						
							|  |  |     }} | 
						
						
						
							|  |  |     transformOrigin={{ | 
						
						
						
							|  |  |       vertical: 'top', | 
						
						
						
							|  |  |       horizontal: 'right', | 
						
						
						
							|  |  |     }} | 
						
						
						
							|  |  |     {...props} | 
						
						
						
							|  |  |   /> | 
						
						
						
							|  |  | ))(({ theme }) => ({ | 
						
						
						
							|  |  | })); | 
						
						
						
							|  |  | 
 | 
						
						
						
							|  |  | function CustomizedMenus({items, selectMenu}) { | 
						
						
						
							|  |  |   const [anchorEl, setAnchorEl] = React.useState(null); | 
						
						
						
							|  |  |   const open = Boolean(anchorEl); | 
						
						
						
							|  |  |   const handleClick = (event) => { | 
						
						
						
							|  |  |     setAnchorEl(event.currentTarget); | 
						
						
						
							|  |  |   }; | 
						
						
						
							|  |  |   const handleClose = (value) => { | 
						
						
						
							|  |  |     setAnchorEl(null); | 
						
						
						
							|  |  |     selectMenu(value); | 
						
						
						
							|  |  |   }; | 
						
						
						
							|  |  | 
 | 
						
						
						
							|  |  |   return ( | 
						
						
						
							|  |  |     <div> | 
						
						
						
							|  |  |       <Button | 
						
						
						
							|  |  |         id="demo-customized-button" | 
						
						
						
							|  |  |         aria-controls="demo-customized-menu" | 
						
						
						
							|  |  |         aria-haspopup="true" | 
						
						
						
							|  |  |         aria-expanded={open ? 'true' : undefined} | 
						
						
						
							|  |  |         // variant="contained" | 
						
						
						
							|  |  |         disableElevation | 
						
						
						
							|  |  |         onClick={handleClick} | 
						
						
						
							|  |  |         endIcon={<KeyboardArrowDownIcon />} | 
						
						
						
							|  |  |       > | 
						
						
						
							|  |  |         پایههای تحصیلی | 
						
						
						
							|  |  |       </Button> | 
						
						
						
							|  |  |       <StyledMenu | 
						
						
						
							|  |  |         id="demo-customized-menu" | 
						
						
						
							|  |  |         MenuListProps={{ | 
						
						
						
							|  |  |           'aria-labelledby': 'demo-customized-button', | 
						
						
						
							|  |  |         }} | 
						
						
						
							|  |  |         anchorEl={anchorEl} | 
						
						
						
							|  |  |         open={open} | 
						
						
						
							|  |  |         onClose={handleClose} | 
						
						
						
							|  |  |       > | 
						
						
						
							|  |  |         { | 
						
						
						
							|  |  |           items.map((item, i) => ( | 
						
						
						
							|  |  |             <MenuItem onClick={() => handleClose(item.value)} disableRipple> | 
						
						
						
							|  |  |               <Link to={'/grades/'+item.value}> | 
						
						
						
							|  |  |                 {item.name} | 
						
						
						
							|  |  |               </Link> | 
						
						
						
							|  |  |             </MenuItem> | 
						
						
						
							|  |  |           )) | 
						
						
						
							|  |  |         } | 
						
						
						
							|  |  |       </StyledMenu> | 
						
						
						
							|  |  |     </div> | 
						
						
						
							|  |  |   ); | 
						
						
						
							|  |  | } | 
						
						
						
							|  |  | 
 | 
						
						
						
							|  |  | export default connect((state) => ({ | 
						
						
						
							|  |  | 
 | 
						
						
						
							|  |  | }), {selectMenu: publicApi.selectMenu,})(CustomizedMenus) |