Skip to content

Commit 79e8a25

Browse files
modularcodermodularcoder
committed
Setup storybook dashboard layout
1 parent 61e0e70 commit 79e8a25

File tree

9 files changed

+369
-62
lines changed

9 files changed

+369
-62
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"dependencies": {
1515
"@material-ui/core": "^4.8.1",
1616
"@material-ui/icons": "^4.5.1",
17+
"@rehooks/component-size": "^1.0.3",
1718
"@types/lodash": "^4.14.149",
1819
"axios": "^0.19.0",
1920
"axios-mock-adapter": "^1.17.0",

‎src/App.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import CssBaseline from '@material-ui/core/CssBaseline'
66
import theme from './_theme'
77
import AppRouter from './AppRouter'
88

9-
console.log('theme', theme)
10-
119
const App = () => {
1210
return (
1311
<div className="App">

‎src/_common/AppHeader/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from '../../../_common/AppHeader/Header'
1+
export { default } from './AppHeader'

‎src/_layouts/DashboardLayout/DashboardLayout.js

Lines changed: 77 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,44 @@
1-
import React from 'react'
1+
import React, { useState, useRef, useLayoutEffect, useEffect } from 'react'
2+
import PropTypes from 'prop-types'
23
import clsx from 'clsx'
3-
4+
import useComponentSize from '@rehooks/component-size'
45
import { makeStyles, useTheme } from '@material-ui/core/styles'
56
import useMediaQuery from '@material-ui/core/useMediaQuery'
67
import Drawer from '@material-ui/core/Drawer'
78
import Hidden from '@material-ui/core/Hidden'
89

9-
import AppHeader from '../../_common/AppHeader/AppHeader'
10-
import AppSidebar from '../../_common/AppSidebar/AppSidebar'
10+
import AppHeader from '../../_common/AppHeader'
1111
import AppFooter from '../../_common/AppFooter'
12+
import AppSidebar from '../../_common/AppSidebar'
13+
14+
export default function DashboardLayout(
15+
{ header, footer, sidebar, content, children } = {
16+
header: AppHeader,
17+
footer: AppFooter,
18+
sidebar: AppSidebar,
19+
},
20+
) {
21+
const refHeaderContainer = useRef(null)
22+
const refSidebarContainer = useRef(null)
23+
const refFooterContainer = useRef(null)
1224

13-
export default function Dashboard({ children }) {
1425
const classes = useStyles()
1526
const theme = useTheme()
1627
const isDesktop = useMediaQuery(theme.breakpoints.up('md'))
1728
const isMobile = !isDesktop
1829

19-
const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false)
20-
const [isSidebarCollapsedDesktop, setIsSidebarCollapsedDesktop] = React.useState(false)
30+
const [contentOffset, setContentOffset] = useState(0)
31+
const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false)
32+
const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(false)
33+
const [isSidebarCollapsedDesktop, setIsSidebarCollapsedDesktop] = useState(false)
34+
35+
const headerSize = useComponentSize(refHeaderContainer)
36+
const sidebarSize = useComponentSize(refSidebarContainer)
37+
const footerSize = useComponentSize(refFooterContainer)
38+
39+
const HeaderComponent = header
40+
const SidebarComponent = sidebar
41+
const FooterComponent = footer
2142

2243
function handleSidebarMobileToggle() {
2344
setIsSidebarOpenMobile(!isSidebarOpenMobile)
@@ -34,27 +55,33 @@ export default function Dashboard({ children }) {
3455
}
3556
}
3657

58+
function handleSidebarToggleCollapse() {
59+
setIsSidebarCollapsedDesktop(!setIsSidebarCollapsedDesktop)
60+
}
61+
3762
return (
3863
<div className={classes.dashboardContainer}>
3964
<div
65+
ref={refHeaderContainer}
4066
className={clsx(
4167
classes.headerContainer,
4268
isDesktop && classes.headerContainerDesktop,
4369
isDesktop &&
4470
isSidebarCollapsedDesktop &&
4571
classes.headerContainerDesktopDrawerCollapsed,
4672
)}
73+
style={{
74+
width: `calc(100% - ${sidebarSize.width}px)`,
75+
}}
4776
>
48-
<AppHeader onToggle={handleSidebarToggle} />
77+
{HeaderComponent && <HeaderComponent />}
4978
</div>
5079
<div
80+
ref={refSidebarContainer}
5181
className={clsx(
5282
classes.sidebarContainer,
5383
isMobile && classes.sidebarContainerMobile,
54-
isDesktop && classes.sidebarContainerDesktop,
55-
isDesktop &&
56-
isSidebarCollapsedDesktop &&
57-
classes.sidebarContainerDesktopDrawerCollapsed,
84+
isDesktop && isSidebarCollapsedDesktop && classes.sidebarContainerCollapsed,
5885
)}
5986
>
6087
<Hidden mdUp implementation="css">
@@ -64,12 +91,13 @@ export default function Dashboard({ children }) {
6491
open={isSidebarOpenMobile}
6592
onClose={handleSidebarMobileToggle}
6693
classes={{
67-
paper: clsx(classes.drawer, classes.drawerMobile),
94+
paper: clsx(classes.drawer), // classes.drawerMobile
6895
}}
6996
ModalProps={{
7097
keepMounted: true, // Better open performance on mobile.
7198
}}
7299
>
100+
{SidebarComponent && <SidebarComponent />}
73101
{/* <Sidebar
74102
isDesktop={isDesktop}
75103
isMobile={isMobile}
@@ -81,14 +109,12 @@ export default function Dashboard({ children }) {
81109
<Hidden smDown implementation="css">
82110
<Drawer
83111
classes={{
84-
paper: clsx(
85-
classes.drawer,
86-
classes.drawerDesktop,
87-
isSidebarCollapsedDesktop && classes.drawerDesktopCollapsed,
88-
),
112+
paper: clsx(classes.drawer),
89113
}}
90114
variant="permanent"
91115
>
116+
{SidebarComponent && <SidebarComponent />}
117+
{/* {sidebar} */}
92118
{/* <Sidebar
93119
isDesktop={isDesktop}
94120
isMobile={isMobile}
@@ -98,44 +124,52 @@ export default function Dashboard({ children }) {
98124
</Drawer>
99125
</Hidden>
100126
</div>
101-
<main className={classes.content}>
102-
<div className={classes.headerSpacer} />
103-
{children}
104-
<AppFooter />
127+
<main
128+
className={classes.mainContainer}
129+
style={{
130+
paddingTop: headerSize.height,
131+
}}
132+
>
133+
<div className={classes.contentContainer}>{children}</div>
134+
<div className={classes.footerContainer}>
135+
{FooterComponent && <FooterComponent />}
136+
</div>
105137
</main>
106138
</div>
107139
)
108140
}
109141

142+
DashboardLayout.props = {
143+
header: PropTypes.elementType,
144+
sidebar: PropTypes.elementType,
145+
footer: PropTypes.elementType,
146+
}
147+
110148
const useStyles = makeStyles(theme => ({
111149
dashboardContainer: {
112150
display: 'flex',
113151
background: '#f5f5f5',
114152
},
115153
headerContainer: {
116154
top: 0,
117-
left: 0,
155+
left: 'auto',
118156
right: 0,
157+
display: 'flex',
158+
alignItems: 'stretch',
119159
position: 'absolute',
120160
zIndex: theme.zIndex.drawer + 1,
121161
transition: theme.transitions.create(['width', 'margin'], {
122162
easing: theme.transitions.easing.sharp,
123163
duration: theme.transitions.duration.leavingScreen,
124164
}),
125165
},
126-
headerContainerDesktop: {
127-
left: 'auto',
128-
width: `calc(100% - ${theme.sidebar.width}px)`,
129-
transition: theme.transitions.create(['width', 'margin'], {
130-
easing: theme.transitions.easing.sharp,
131-
duration: theme.transitions.duration.enteringScreen,
132-
}),
133-
},
134-
headerContainerDesktopDrawerCollapsed: {
135-
width: `calc(100% - ${theme.sidebar.widthCollapsed}px)`,
136-
},
137166
sidebarContainer: {
167+
display: 'flex',
168+
alignItems: 'stretch',
138169
position: 'relative',
170+
top: 0,
171+
bottom: 0,
172+
flexDirection: 'row',
139173
[theme.breakpoints.up('md')]: {
140174
width: theme.sidebar.width,
141175
flexShrink: 0,
@@ -148,40 +182,25 @@ const useStyles = makeStyles(theme => ({
148182
sidebarContainerMobile: {
149183
width: 0,
150184
},
151-
sidebarContainerDesktop: {
152-
width: theme.sidebar.width,
153-
},
154-
sidebarContainerDesktopDrawerCollapsed: {
155-
[theme.breakpoints.up('md')]: {
156-
width: theme.sidebar.widthCollapsed,
157-
},
158-
},
159-
drawer: {},
160-
drawerMobile: {
161-
width: theme.sidebar.width,
185+
sidebarContainerCollapsed: {
186+
width: theme.sidebar.widthCollapsed,
162187
},
163-
drawerDesktop: {
188+
drawer: {
164189
width: '100%',
165190
position: 'absolute',
166191
},
167-
drawerDesktopCollapsed: {
168-
overflowX: 'hidden',
169-
},
170-
headerSpacer: theme.mixins.toolbar,
171-
content: {
192+
mainContainer: {
172193
flexGrow: 1,
173194
height: '100vh',
174195
overflow: 'auto',
175196
flexDirection: 'column',
176197
display: 'flex',
177198
},
178-
paper: {
179-
padding: theme.spacing(2),
180-
display: 'flex',
181-
overflow: 'auto',
182-
flexDirection: 'column',
199+
contentContainer: {
200+
position: 'relative',
201+
flex: 1,
183202
},
184-
fixedHeight: {
185-
height: 240,
203+
footerContainer: {
204+
position: 'relative',
186205
},
187206
}))

‎src/_layouts/DashboardLayout/DashboardLayout.stories.mdx

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,90 @@ import DashboardLayout from './DashboardLayout.js'
33

44
<Meta title="General/Components/DashboardLayout" component={DashboardLayout} />
55

6+
67
# Dashboard Layout
78

89
Application dashboard layout.
910

11+
export const Placeholder = ({ children }) => <div
12+
style={{
13+
padding: 10,
14+
top: 10,
15+
bottom: 10,
16+
left: 10,
17+
right: 10,
18+
display: 'flex',
19+
flex: 1,
20+
display: 'flex',
21+
}}
22+
>
23+
<div
24+
style={{
25+
border: '3px dashed #ccc',
26+
padding: 10,
27+
display: 'flex',
28+
flex: 1,
29+
justifyContent: 'center',
30+
alignItems: 'center',
31+
borderRadius: 10,
32+
}}
33+
>
34+
{children}
35+
</div>
36+
</div>
37+
38+
export const Header = () => <div
39+
style={{
40+
width: '100%',
41+
background: 'rgb(152, 173, 153)',
42+
display: 'flex',
43+
flexDirection: 'column',
44+
}}
45+
>
46+
<Placeholder>
47+
Header
48+
</Placeholder>
49+
</div>
50+
51+
export const Sidebar = () => <div
52+
style={{
53+
position: 'absolute',
54+
width: '100%',
55+
height: '100%',
56+
background: '#7e868c',
57+
color: '#fff',
58+
display: 'flex',
59+
flexDirection: 'column',
60+
}}
61+
>
62+
<Placeholder>
63+
Sidebar
64+
</Placeholder>
65+
</div>
66+
67+
export const Footer = () => <div
68+
style={{
69+
background: '#bfb8ab',
70+
display: 'flex',
71+
flexDirection: 'column',
72+
}}
73+
>
74+
<Placeholder>
75+
Footer
76+
</Placeholder>
77+
</div>
78+
1079
<Preview>
1180
<Story name="dashboard layout">
12-
<DashboardLayout />
81+
<DashboardLayout
82+
header={Header}
83+
sidebar={Sidebar}
84+
footer={Footer}
85+
>
86+
<Placeholder>
87+
Content
88+
</Placeholder>
89+
</DashboardLayout>
1390
</Story>
1491
</Preview>
1592

0 commit comments

Comments
 (0)