75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import AppBar from "@material-ui/core/AppBar";
|
|
import {
|
|
createStyles,
|
|
IconButton,
|
|
Toolbar,
|
|
Typography,
|
|
} from "@material-ui/core";
|
|
import { makeStyles, Theme } from "@material-ui/core/styles";
|
|
import { ProfileMenu } from "./ProfileMenu";
|
|
import { mainMenuOpen, mainMenuWidth } from "./MainMenu";
|
|
import MenuIcon from "@material-ui/icons/Menu";
|
|
import { useReactiveVar } from "@apollo/client";
|
|
import clsx from "clsx";
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
appBar: {
|
|
transition: theme.transitions.create(["margin", "width"], {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
}),
|
|
},
|
|
appBarShift: {
|
|
width: `calc(100% - ${mainMenuWidth}px)`,
|
|
marginLeft: mainMenuWidth,
|
|
transition: theme.transitions.create(["margin", "width"], {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
},
|
|
hide: {
|
|
display: "none",
|
|
},
|
|
menuButton: {
|
|
marginRight: theme.spacing(2),
|
|
},
|
|
title: {
|
|
flexGrow: 1,
|
|
},
|
|
})
|
|
);
|
|
|
|
function CustomAppBar(): React.ReactElement {
|
|
const classes = useStyles();
|
|
const open = useReactiveVar(mainMenuOpen);
|
|
|
|
return (
|
|
<AppBar
|
|
position="fixed"
|
|
className={clsx(classes.appBar, {
|
|
[classes.appBarShift]: open,
|
|
})}
|
|
>
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
className={clsx(classes.menuButton, open && classes.hide)}
|
|
color="inherit"
|
|
aria-label="menu"
|
|
onClick={() => mainMenuOpen(true)}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" className={classes.title}>
|
|
Kandimat
|
|
</Typography>
|
|
<ProfileMenu />
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|
|
|
|
export default CustomAppBar;
|