@@ -9,21 +9,23 @@ import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material'
9
9
// project imports
10
10
import Header from './Header'
11
11
import Sidebar from './Sidebar'
12
- import { drawerWidth } from '@/store/constant'
12
+ import { drawerWidth , headerHeight } from '@/store/constant'
13
13
import { SET_MENU } from '@/store/actions'
14
14
15
15
// styles
16
16
const Main = styled ( 'main' , { shouldForwardProp : ( prop ) => prop !== 'open' } ) ( ( { theme, open } ) => ( {
17
17
...theme . typography . mainContent ,
18
18
...( ! open && {
19
+ backgroundColor : 'transparent' ,
19
20
borderBottomLeftRadius : 0 ,
20
21
borderBottomRightRadius : 0 ,
21
- transition : theme . transitions . create ( 'margin ' , {
22
+ transition : theme . transitions . create ( 'all ' , {
22
23
easing : theme . transitions . easing . sharp ,
23
24
duration : theme . transitions . duration . leavingScreen
24
25
} ) ,
26
+ marginRight : 0 ,
25
27
[ theme . breakpoints . up ( 'md' ) ] : {
26
- marginLeft : - ( drawerWidth - 20 ) ,
28
+ marginLeft : - drawerWidth ,
27
29
width : `calc(100% - ${ drawerWidth } px)`
28
30
} ,
29
31
[ theme . breakpoints . down ( 'md' ) ] : {
@@ -39,20 +41,16 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
39
41
}
40
42
} ) ,
41
43
...( open && {
42
- transition : theme . transitions . create ( 'margin' , {
44
+ backgroundColor : 'transparent' ,
45
+ transition : theme . transitions . create ( 'all' , {
43
46
easing : theme . transitions . easing . easeOut ,
44
47
duration : theme . transitions . duration . enteringScreen
45
48
} ) ,
46
49
marginLeft : 0 ,
50
+ marginRight : 0 ,
47
51
borderBottomLeftRadius : 0 ,
48
52
borderBottomRightRadius : 0 ,
49
- width : `calc(100% - ${ drawerWidth } px)` ,
50
- [ theme . breakpoints . down ( 'md' ) ] : {
51
- marginLeft : '20px'
52
- } ,
53
- [ theme . breakpoints . down ( 'sm' ) ] : {
54
- marginLeft : '10px'
55
- }
53
+ width : `calc(100% - ${ drawerWidth } px)`
56
54
} )
57
55
} ) )
58
56
@@ -88,7 +86,7 @@ const MainLayout = () => {
88
86
transition : leftDrawerOpened ? theme . transitions . create ( 'width' ) : 'none'
89
87
} }
90
88
>
91
- < Toolbar >
89
+ < Toolbar sx = { { height : ` ${ headerHeight } px` , borderBottom : '1px solid' , borderColor : theme . palette . primary [ 200 ] + 75 } } >
92
90
< Header handleLeftDrawerToggle = { handleLeftDrawerToggle } />
93
91
</ Toolbar >
94
92
</ AppBar >
0 commit comments