Dashboard layout storybook

Author: modularcoder

src/_common/AppHeader/AppHeader.js

@@ -15,14 +15,11 @@ import HeaderSearch from './AppHeaderSearch'
 import HeaderNotifications from './AppHeaderNotifications'
 import HeaderProfile from './AppHeaderProfile'
 
-/**
- * The `Avatar` component is where all your avatars come to play.
- */
-const Header = ({ onToggle }) => {
+const AppHeader = ({ onToggle }) => {
   const classes = useStyles()
 
   return (
-    <AppBar position="absolute" className={classes.header}>
+    <AppBar position="static" className={classes.header}>
       <Toolbar className={classes.toolbar}>
         <IconButton
           edge="start"
@@ -44,7 +41,7 @@ const Header = ({ onToggle }) => {
   )
 }
 
-Header.propTypes = {
+AppHeader.propTypes = {
   onToggle: PropTypes.func,
 }
 
@@ -69,4 +66,4 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-export default Header
+export default AppHeader

src/_layouts/DashboardLayout/DashboardLayout.js

@@ -197,6 +197,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
   },
   contentContainer: {
+    display: 'flex',
     position: 'relative',
     flex: 1,
   },

src/_layouts/DashboardLayout/DashboardLayout.stories.mdx

@@ -1,14 +1,18 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
 import DashboardLayout from './DashboardLayout.js'
 
+import AppHeader from '../../_common/AppHeader'
+import AppSidebar from '../../_common/AppSidebar'
+import AppFooter from '../../_common/AppFooter'
+
 <Meta title="General/Components/DashboardLayout" component={DashboardLayout} />
 
 
 # Dashboard Layout
 
 Application dashboard layout.
 
-export const Placeholder = ({ children }) => <div
+export const DemoPlaceholder = ({ children }) => <div
   style={{
     padding: 10,
     top: 10,
@@ -35,20 +39,20 @@ export const Placeholder = ({ children }) => <div
   </div>
 </div>
 
-export const Header = () => <div 
+export const DemoHeader = () => <div 
   style={{
     width: '100%',
     background: 'rgb(152, 173, 153)',
     display: 'flex',
     flexDirection: 'column',
   }}
 >
-  <Placeholder>
+  <DemoPlaceholder>
     Header
-  </Placeholder>
+  </DemoPlaceholder>
 </div>
 
-export const Sidebar = () => <div 
+export const DemoSidebar = () => <div 
   style={{
     position: 'absolute',
     width: '100%',
@@ -59,33 +63,49 @@ export const Sidebar = () => <div
     flexDirection: 'column',
   }}
 >
-  <Placeholder>
+  <DemoPlaceholder>
     Sidebar
-  </Placeholder>
+  </DemoPlaceholder>
 </div>
 
-export const Footer = () => <div 
+export const DemoFooter = () => <div 
   style={{
     background: '#bfb8ab',
     display: 'flex',
     flexDirection: 'column',
   }}
 >
-  <Placeholder>
+  <DemoPlaceholder>
     Footer
-  </Placeholder>
+  </DemoPlaceholder>
 </div>
 
 <Preview>
   <Story name="dashboard layout">
     <DashboardLayout
-      header={Header}
-      sidebar={Sidebar}
-      footer={Footer}
+      header={DemoHeader}
+      sidebar={DemoSidebar}
+      footer={DemoFooter}
+    >
+      <DemoPlaceholder>
+        Content
+      </DemoPlaceholder>
+    </DashboardLayout>
+  </Story>
+</Preview>
+
+## With real header/footer/sidebar
+
+<Preview>
+  <Story name="with components">
+    <DashboardLayout
+      header={AppHeader}
+      sidebar={AppSidebar}
+      footer={AppFooter}
     >
-      <Placeholder>
+      <DemoPlaceholder>
         Content
-      </Placeholder>
+      </DemoPlaceholder>
     </DashboardLayout>
   </Story>
 </Preview>