77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
|
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 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';
|
|
|
|
export default function MobileMenu({nickname}) {
|
|
const [state, setState] = React.useState(false);
|
|
|
|
const toggleDrawer =
|
|
(open: boolean) =>
|
|
(event: React.KeyboardEvent | React.MouseEvent) => {
|
|
if (
|
|
event &&
|
|
event.type === 'keydown' &&
|
|
((event as React.KeyboardEvent).key === 'Tab' ||
|
|
(event as React.KeyboardEvent).key === 'Shift')
|
|
) {
|
|
return;
|
|
}
|
|
|
|
setState( open );
|
|
};
|
|
|
|
function logout() {
|
|
const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
|
|
logoutForm.submit();
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Button onClick={toggleDrawer(true)}>
|
|
<svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
|
<path className="inline-flex" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</Button>
|
|
<SwipeableDrawer
|
|
anchor={"right"}
|
|
open={state}
|
|
onClose={toggleDrawer(false)}
|
|
onOpen={toggleDrawer(true)}
|
|
>
|
|
<Box
|
|
sx={{ width: 250 }}
|
|
role="presentation"
|
|
onClick={toggleDrawer(false)}
|
|
onKeyDown={toggleDrawer(false)}
|
|
>
|
|
<List>
|
|
<ListItem button key={"user"}>
|
|
<ListItemIcon>
|
|
<MailIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={nickname} />
|
|
</ListItem>
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
<ListItem button key={"user.logout"} onClick={logout}>
|
|
<ListItemIcon>
|
|
<InboxIcon />
|
|
</ListItemIcon>
|
|
<ListItemText primary={"Logout"} />
|
|
</ListItem>
|
|
</List>
|
|
</Box>
|
|
</SwipeableDrawer>
|
|
</div>
|
|
);
|
|
}
|