1import { useState } from "react";
2
3// @mui material components
4import Container from "@mui/material/Container";
5import Grid from "@mui/material/Grid";
6import Icon from "@mui/material/Icon";
7import Menu from "@mui/material/Menu";
8import MenuItem from "@mui/material/MenuItem";
9
10// Material Kit 2 React components
11import MKBox from "components/MKBox";
12import MKButton from "components/MKButton";
13
14function DropdownAndDropup() {
15  const [dropdown, setDropdown] = useState(null);
16  const [dropup, setDropup] = useState(null);
17
18  const openDropdown = ({ currentTarget }) => setDropdown(currentTarget);
19  const closeDropdown = () => setDropdown(null);
20
21  const openDropup = ({ currentTarget }) => setDropup(currentTarget);
22  const closeDropup = () => setDropup(null);
23
24  // Styles
25  const iconStyles = {
26    ml: 1,
27    fontWeight: "bold",
28    transition: "transform 200ms ease-in-out",
29  };
30
31  const dropdownIconStyles = {
32    transform: dropdown ? "rotate(180deg)" : "rotate(0)",
33    ...iconStyles,
34  };
35
36  const dropupIconStyles = {
37    transform: dropup ? "rotate(180deg)" : "rotate(0)",
38    ...iconStyles,
39  };
40
41  return (
42    <MKBox component="section" py={12}>
43      <Container>
44        <Grid container spacing={3}>
45          <Grid item xs={12} lg={6} textAlign="center">
46            <MKButton variant="gradient" color="info" onClick={openDropdown}>
47              Dropdown <Icon sx={dropdownIconStyles}>expand_more</Icon>
48            </MKButton>
49            <Menu anchorEl={dropdown} open={Boolean(dropdown)} onClose={closeDropdown}>
50              <MenuItem onClick={closeDropdown}>Action</MenuItem>
51              <MenuItem onClick={closeDropdown}>Another action</MenuItem>
52              <MenuItem onClick={closeDropdown}>Something else here</MenuItem>
53            </Menu>
54          </Grid>
55          <Grid item xs={12} lg={6} textAlign="center">
56            <MKButton variant="gradient" color="info" onClick={openDropup}>
57              Dropup <Icon sx={dropupIconStyles}>expand_more</Icon>
58            </MKButton>
59            <Menu
60              anchorEl={dropup}
61              open={Boolean(dropup)}
62              anchorOrigin={{
63                vertical: "top",
64                horizontal: "left",
65              }}
66              transformOrigin={{
67                vertical: "bottom",
68                horizontal: "left",
69              }}
70              onClose={closeDropup}
71            >
72              <MenuItem onClick={closeDropup}>Action</MenuItem>
73              <MenuItem onClick={closeDropup}>Another action</MenuItem>
74              <MenuItem onClick={closeDropup}>Something else here</MenuItem>
75            </Menu>
76          </Grid>
77        </Grid>
78      </Container>
79    </MKBox>
80  );
81}
82
83export default DropdownAndDropup;