73 lines
2.8 KiB
JavaScript
73 lines
2.8 KiB
JavaScript
import MenuIcon from "@mui/icons-material/Menu";
|
|
import {AppBar, Box, Container, CssBaseline, IconButton, Stack, Toolbar, useTheme} from "@mui/material";
|
|
import ProfileMenu from "./ProfileMenu";
|
|
|
|
function Header({drawerWidth, handleDrawerToggle}) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<>
|
|
<CssBaseline/>
|
|
<AppBar
|
|
position="fixed"
|
|
sx={{
|
|
width: {md: `calc(100% - ${drawerWidth}px)`},
|
|
ml: {md: `${drawerWidth}px`},
|
|
}}
|
|
>
|
|
<Container maxWidth="xxl">
|
|
<Toolbar
|
|
disableGutters
|
|
sx={{
|
|
display: "flex",
|
|
}}
|
|
>
|
|
<Stack direction="row" justifyContent="flex-start" sx={{flex: 1}}>
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="open drawer"
|
|
onClick={handleDrawerToggle}
|
|
edge="start"
|
|
sx={{display: {md: "none"}, m: 0}}
|
|
>
|
|
<MenuIcon/>
|
|
</IconButton>
|
|
</Stack>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="center"
|
|
sx={{
|
|
flex: 1,
|
|
position: "relative",
|
|
...theme.mixins.toolbar,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
position: "relative",
|
|
my: 1,
|
|
width: 56,
|
|
height: 56,
|
|
"@media (min-width:600px)": {maxWidth: 64, maxHeight: 64},
|
|
"@media (min-width:0px)": {
|
|
"@media (orientation: landscape)": {
|
|
width: 48,
|
|
height: 48,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
</Box>
|
|
</Stack>
|
|
<Stack direction="row" justifyContent="flex-end" sx={{flex: 1}}>
|
|
<ProfileMenu/>
|
|
</Stack>
|
|
</Toolbar>
|
|
</Container>
|
|
</AppBar>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Header;
|