You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.2 KiB
44 lines
1.2 KiB
import { useState } from 'react'; |
|
import { Box, AppBar, Typography, Toolbar, IconButton } from '@mui/material'; |
|
import AccountCircle from '@mui/icons-material/AccountCircle'; |
|
import { UserProfile } from './UserProfile'; |
|
|
|
export const Appbar = () => { |
|
const [showDrawer, setShowDrawer] = useState(false); |
|
|
|
const toggleDrawer = () => (event) => { |
|
if ( |
|
event.type === 'keydown' && |
|
(event.key === 'Tab' || event.key === 'Shift') |
|
) { |
|
return; |
|
} |
|
|
|
setShowDrawer((showDrawer) => !showDrawer); |
|
}; |
|
|
|
return ( |
|
<Box> |
|
<AppBar> |
|
<Toolbar> |
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> |
|
supachat |
|
</Typography> |
|
<div> |
|
<IconButton |
|
size="large" |
|
aria-label="account of current user" |
|
aria-controls="menu-appbar" |
|
aria-haspopup="true" |
|
onClick={toggleDrawer()} |
|
color="inherit" |
|
> |
|
<AccountCircle /> |
|
</IconButton> |
|
<UserProfile toggleDrawer={toggleDrawer} showDrawer={showDrawer} /> |
|
</div> |
|
</Toolbar> |
|
</AppBar> |
|
</Box> |
|
); |
|
};
|
|
|