Update sidebar

Author: modularcoder

src/_common/AppSidebar/AppSidebar.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 
 import { Link } from 'react-router-dom'
@@ -8,7 +9,7 @@ import Logo from '_common/BaseLogo/BaseLogo'
 import SidebarNav from './AppSidebarNav'
 
 const Sidebar = props => {
-  const { isDesktop, isSidebarCollapsedDesktop } = props
+  const { isCollapsed } = props
 
   const classes = useStyles(props)
 
@@ -29,11 +30,19 @@ const Sidebar = props => {
           </Typography>
         </Link>
       </div>
-      <SidebarNav isCollapsed={isDesktop && isSidebarCollapsedDesktop} />
+      <SidebarNav isCollapsed={isCollapsed} />
     </aside>
   )
 }
 
+Sidebar.defaultProps = {
+  isCollapsed: false,
+}
+
+Sidebar.propTypes = {
+  isCollapsed: PropTypes.bool,
+}
+
 const useStyles = makeStyles(theme => ({
   sidebar: {
     position: 'absolute',

src/_common/AppSidebar/AppSidebar.stories.mdx

@@ -37,7 +37,7 @@ Application sidebar component.
           width: theme.sidebar.width,
           height: 1100
         }}>
-          <AppSidebar collapsed={true} />
+          <AppSidebar isCollapsed={true} />
         </div>
       )
     }}

src/_layouts/DashboardLayout/DashboardLayout.js

@@ -12,21 +12,10 @@ import AppFooter from '../../_common/AppFooter'
 import AppSidebar from '../../_common/AppSidebar'
 
 const DashboardLayout = (
-  {
-    header,
-    footer,
-    sidebar,
-    isSidebarOpenMobileInitial,
-    isSidebarOpenDesktopInitial,
-    isSidebarCollapsedInitial,
-    children,
-  } = {
+  { header, footer, sidebar, children } = {
     header: AppHeader,
     footer: AppFooter,
     sidebar: AppSidebar,
-    isSidebarOpenMobileInitial: false,
-    isSidebarOpenDesktopInitial: true,
-    isSidebarCollapsedInitial: false,
   },
 ) => {
   const refHeaderContainer = useRef(null)
@@ -38,13 +27,9 @@ const DashboardLayout = (
   const isDesktop = useMediaQuery(theme.breakpoints.up('md'))
   const isMobile = !isDesktop
 
-  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(
-    isSidebarOpenMobileInitial,
-  )
-  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(
-    isSidebarOpenDesktopInitial,
-  )
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(isSidebarCollapsedInitial)
+  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false)
+  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true)
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
 
   const headerSize = useComponentSize(refHeaderContainer)
   // const sidebarSize = useComponentSize(refSidebarContainer)
@@ -114,13 +99,7 @@ const DashboardLayout = (
               keepMounted: true, // Better open performance on mobile.
             }}
           >
-            {SidebarComponent && <SidebarComponent />}
-            {/* <Sidebar
-              isDesktop={isDesktop}
-              isMobile={isMobile}
-              isSidebarCollapsedDesktop={isSidebarCollapsedDesktop}
-              isSidebarOpenMobile={isSidebarOpenMobile}
-            /> */}
+            {SidebarComponent && <SidebarComponent isCollapsed={isSidebarCollapsed} />}
           </Drawer>
         </Hidden>
         <Hidden smDown implementation="css">
@@ -131,13 +110,6 @@ const DashboardLayout = (
             variant="permanent"
           >
             {SidebarComponent && <SidebarComponent />}
-            {/* {sidebar} */}
-            {/* <Sidebar
-              isDesktop={isDesktop}
-              isMobile={isMobile}
-              isSidebarCollapsedDesktop={isSidebarCollapsedDesktop}
-              isSidebarOpenMobile={isSidebarOpenMobile}
-            /> */}
           </Drawer>
         </Hidden>
       </div>
@@ -156,13 +128,16 @@ const DashboardLayout = (
   )
 }
 
+DashboardLayout.defaultProps = {
+  header: AppHeader,
+  sidebar: AppSidebar,
+  footer: AppFooter,
+}
+
 DashboardLayout.propTypes = {
   header: PropTypes.elementType,
   sidebar: PropTypes.elementType,
   footer: PropTypes.elementType,
-  isSidebarOpenMobileInitial: PropTypes.bool,
-  isSidebarOpenDesktopInitial: PropTypes.bool,
-  isSidebarCollapsedInitial: PropTypes.bool,
 }
 
 const useStyles = makeStyles(theme => ({