Skip to content

Commit 07edc4b

Browse files
committed
layout appbar supports persistent
1 parent 19b9b43 commit 07edc4b

File tree

2 files changed

+40
-7
lines changed

2 files changed

+40
-7
lines changed

src/components/Layout/Layout.jsx

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ class Layout extends React.PureComponent {
3434
appBarPosition: 'default',
3535
stickyFooter: false,
3636
drawerOpen: false,
37+
drawerUnder: false,
3738
};
3839

3940
handleDrawerClose = () => {
@@ -53,33 +54,51 @@ class Layout extends React.PureComponent {
5354
classes: defaultClasses,
5455
overrideClasses,
5556
children,
56-
appBarPosition,
57-
stickyFooter,
58-
footerContent,
5957
appBarContent,
58+
appBarPosition,
59+
appBarProps,
6060
drawerContent,
6161
drawerOpen,
62-
appBarProps,
62+
drawerType,
63+
drawerUnder,
6364
drawerProps,
65+
footerContent,
66+
stickyFooter,
6467
footerProps,
6568
} = this.props;
6669

70+
// TODO change the way to overrideClasses
71+
// use classes insted of overrideClasses as material-ui
6772
const classes = { ...defaultClasses, ...overrideClasses };
6873

6974
const mainClassnames = classNames(
7075
classes.main,
7176
{ [`${classes.mainFixedAppBar}`]: appBarPosition === 'fixed' },
7277
{ [`${classes.mainStickyFooter}`]: stickyFooter },
7378
);
79+
80+
const appBarShift =
81+
drawerOpen && !drawerUnder && (drawerType === 'permanent' || drawerType === 'persistent');
82+
console.log('appBarShift', appBarShift);
83+
84+
const appBarClassnames = classNames(classes.appBar, {
85+
[`${classes.appBarShift}`]: appBarShift,
86+
});
7487
return (
7588
<div className={classes.layout}>
76-
<AppBar {...appBarProps} position={appBarPosition} onIconClick={this.toggleDrawer}>
89+
<AppBar
90+
position={appBarPosition}
91+
onIconClick={this.toggleDrawer}
92+
className={appBarClassnames}
93+
{...appBarProps}
94+
>
7795
{appBarContent}
7896
</AppBar>
7997
{drawerContent ? (
8098
<Drawer
8199
open={drawerOpen}
82100
onRequestClose={this.handleDrawerClose}
101+
type={drawerType}
83102
classes={{ paper: classes.drawerPaper }}
84103
{...drawerProps}
85104
>

src/components/Layout/styles.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
const drawerWidth = 240;
22

3-
const styles = {
3+
const styles = theme => ({
44
layout: {
55
display: 'flex',
66
minHeight: '100vh',
77
flexDirection: 'column',
88
},
9+
appBar: {
10+
transition: theme.transitions.create(['margin', 'width'], {
11+
easing: theme.transitions.easing.sharp,
12+
duration: theme.transitions.duration.leavingScreen,
13+
}),
14+
},
15+
appBarShift: {
16+
marginLeft: drawerWidth,
17+
width: `calc(100% - ${drawerWidth}px)`,
18+
transition: theme.transitions.create(['margin', 'width'], {
19+
easing: theme.transitions.easing.easeOut,
20+
duration: theme.transitions.duration.enteringScreen,
21+
}),
22+
},
923
main: {
1024
paddingTop: '0px',
1125
display: 'flex',
@@ -24,6 +38,6 @@ const styles = {
2438
drawerPaper: {
2539
width: drawerWidth,
2640
},
27-
};
41+
});
2842

2943
export default styles;

0 commit comments

Comments
 (0)