104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
import * as React from "react";
|
|
import Box from "@mui/material/Box";
|
|
import Drawer from "@mui/material/Drawer";
|
|
import Button from "@mui/material/Button";
|
|
import List from "@mui/material/List";
|
|
import Divider from "@mui/material/Divider";
|
|
import ListItem from "@mui/material/ListItem";
|
|
import ListItemButton from "@mui/material/ListItemButton";
|
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
import ListItemText from "@mui/material/ListItemText";
|
|
import InboxIcon from "@mui/icons-material/MoveToInbox";
|
|
import MailIcon from "@mui/icons-material/Mail";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
|
|
export default function RightTemporaryDrawer() {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
const toggleDrawer =
|
|
(open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
|
|
if (
|
|
event.type === "keydown" &&
|
|
((event as React.KeyboardEvent).key === "Tab" ||
|
|
(event as React.KeyboardEvent).key === "Shift")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
setOpen(open);
|
|
};
|
|
|
|
const list = () => (
|
|
<Box
|
|
sx={{ width: 400 }}
|
|
role="presentation"
|
|
onClick={toggleDrawer(false)}
|
|
onKeyDown={toggleDrawer(false)}
|
|
>
|
|
<List>
|
|
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
|
|
<ListItem key={text} disablePadding>
|
|
<ListItemButton>
|
|
<ListItemIcon>
|
|
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
|
</ListItemIcon>
|
|
<ListItemText primary={text} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
{["All mail", "Trash", "Spam"].map((text, index) => (
|
|
<ListItem key={text} disablePadding>
|
|
<ListItemButton>
|
|
<ListItemIcon>
|
|
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
|
</ListItemIcon>
|
|
<ListItemText primary={text} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
sx={{
|
|
borderRadius: "8px",
|
|
textTransform: "none",
|
|
backgroundColor: "#f5f5f5",
|
|
color: "#555",
|
|
padding: "6px 12px",
|
|
boxShadow: "inset 0 0 0 1px #ddd",
|
|
fontWeight: 400,
|
|
fontSize: "16px",
|
|
justifyContent: "flex-start",
|
|
"& .MuiButton-startIcon": {
|
|
marginRight: "12px",
|
|
backgroundColor: "#eee",
|
|
padding: "8px",
|
|
borderRadius: "4px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: "#e0e0e0",
|
|
},
|
|
}}
|
|
startIcon={<SearchIcon />}
|
|
onClick={toggleDrawer(true)}
|
|
>
|
|
Advanced Search
|
|
</Button>
|
|
{/* <Button onClick={toggleDrawer(true)}>Open Right Drawer</Button> */}
|
|
<Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
|
|
{list()}
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
}
|