feat: move state of sidebar visibility to the local store

SoftwareBrothers · Sep 18, 2020 · 221fcfa · 221fcfa
1 parent 6dd31d2
commit 221fcfa
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/src/frontend/components/app/sidebar/sidebar.tsx b/src/frontend/components/app/sidebar/sidebar.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
+import styled from 'styled-components'
 import { useSelector } from 'react-redux'
-import { Box, cssClass } from '@admin-bro/design-system'
+import { Box, cssClass, themeGet } from '@admin-bro/design-system'
 
 import { BrandingOptions } from 'src/admin-bro-options.interface'
 import ResourceJSON from 'src/backend/decorators/resource-json.interface'
@@ -16,6 +17,29 @@ type Props = {
   isVisible: boolean;
 }
 
+const StyledSidebar = styled(Box)`
+  transition: left 0.3s;
+  top: 0;
+  bottom: 0;
+
+  &.hidden {
+    left: -${themeGet('sizes', 'sidebarWidth')};
+  }
+  &.visible {
+    left: 0;
+  }
+`
+
+StyledSidebar.defaultProps = {
+  position: ['absolute', 'absolute', 'absolute', 'absolute', 'inherit'],
+  width: 'sidebarWidth',
+  borderRight: 'default',
+  display: 'flex',
+  flexDirection: 'column',
+  zIndex: 1000,
+  bg: 'white',
+}
+
 const Sidebar: React.FC<Props> = (props) => {
   const { isVisible } = props
   const [branding, resources, pages]: [BrandingOptions, ResourceJSON[], PageJSON[]] = useSelector(
@@ -25,21 +49,16 @@ const Sidebar: React.FC<Props> = (props) => {
   )
 
   return (
-    <Box
+    <StyledSidebar
       className={isVisible ? 'visible' : 'hidden'}
-      position={['absolute', 'absolute', 'absolute', 'absolute', 'inherit']}
-      width="sidebarWidth"
-      borderRight="default"
-      display="flex"
-      flexDirection="column"
     >
       <SidebarBranding branding={branding} />
       <Box flexGrow={1} className={cssClass('Resources')}>
         <SidebarResourceSection resources={resources} />
       </Box>
       <SidebarPages pages={pages} />
       {branding?.softwareBrothers && <SidebarFooter />}
-    </Box>
+    </StyledSidebar>
   )
 }
 

diff --git a/src/frontend/components/application.tsx b/src/frontend/components/application.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-children-prop */
-import React, { useState } from 'react'
+import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { createGlobalStyle } from 'styled-components'
 import { Box, Overlay, Reset } from '@admin-bro/design-system'
@@ -12,6 +12,7 @@ import Notice from './app/notice'
 import {
   Dashboard, ResourceAction, RecordAction, Page, BulkAction, Resource,
 } from './routes'
+import { useLocalStorage } from '../hooks'
 
 const GlobalStyle = createGlobalStyle`
   html, body, #app {
@@ -24,7 +25,7 @@ const GlobalStyle = createGlobalStyle`
 `
 
 const App: React.FC = () => {
-  const [sidebarVisible, toggleSidebar] = useState(false)
+  const [sidebarVisible, toggleSidebar] = useLocalStorage('sidebarVisible', false)
   const h = new ViewHelpers()
 
   const resourceId = ':resourceId'