-
Notifications
You must be signed in to change notification settings - Fork 1
/
LayoutAppBar.js
102 lines (95 loc) · 2.58 KB
/
LayoutAppBar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@mui/styles';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
// import Badge from '@mui/material/Badge';
import MenuIcon from '@mui/icons-material/Menu';
// import NotificationsIcon from '@mui/icons-material/Notifications';
// import { useGetContext, useGetConfig } from '../../services/react-root';
// import { LayoutDrawer } from './LayoutDrawer';
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
menuButtonHidden: {
display: 'none',
},
title: {
flexGrow: 1,
},
appBarSpacer: theme.mixins.toolbar,
}));
export const LayoutAppBar = ({
hasDrawer,
isDrawerOpen,
handleDrawerOpen,
title,
}) => {
const classes = useStyles();
return (
<AppBar
position="absolute"
className={clsx(classes.appBar, isDrawerOpen && classes.appBarShift)}
>
<Toolbar className={classes.toolbar}>
{hasDrawer && (
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
className={clsx(
classes.menuButton,
isDrawerOpen && classes.menuButtonHidden,
)}
>
<MenuIcon />
</IconButton>
)}
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
{title}
</Typography>
{/* <IconButton color="inherit">
<Badge badgeContent={4} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton> */}
</Toolbar>
</AppBar>
);
};