ui: Remember sidebar collapsed state (#431)

pingcap · Apr 27, 2020 · 485f61a · 485f61a
1 parent 1037e25
commit 485f61a
Show file tree

Hide file tree

Showing 13 changed files with 214 additions and 206 deletions.
diff --git a/ui/.github_release_version b/ui/.github_release_version
@@ -1,3 +1,3 @@
 # This file contains a version number which will be used to release assets to
 # GitHub. To trigger a new asset release, simply increase this version number.
-20200424_2
+20200427_1
diff --git a/ui/.package_release_version b/ui/.package_release_version
@@ -1,3 +1,3 @@
 # This file contains a version number which will be used to release packages.
 # To trigger a new package release, simply increase this version number.
-0.0.4
+0.0.5
diff --git a/ui/dashboardApp/layout/main/Sider/Banner.js b/ui/dashboardApp/layout/main/Sider/Banner.js
@@ -11,7 +11,7 @@ const toggleWidth = 40
 const toggleHeight = 50
 
 export default function ToggleBanner({
-  width,
+  fullWidth,
   collapsedWidth,
   collapsed,
   onToggle,
@@ -22,7 +22,7 @@ export default function ToggleBanner({
     height: collapsed ? toggleHeight : bannerSize.height || 0,
   })
   const transButton = useSpring({
-    left: collapsed ? 0 : width - toggleWidth,
+    left: collapsed ? 0 : fullWidth - toggleWidth,
     width: collapsed ? collapsedWidth : toggleWidth,
   })
 
@@ -35,7 +35,7 @@ export default function ToggleBanner({
         <div
           ref={bannerRef}
           className={styles.bannerLeft}
-          style={{ width: width - toggleWidth }}
+          style={{ width: fullWidth - toggleWidth }}
         >
           <Flexbox flexDirection="row">
             <div className={styles.bannerLogo}>

diff --git a/ui/dashboardApp/layout/main/Sider/index.js b/ui/dashboardApp/layout/main/Sider/index.js
@@ -71,7 +71,8 @@ function useCurrentLogin() {
 
 export default function Sider({
   registry,
-  width,
+  fullWidth,
+  defaultCollapsed,
   collapsed,
   collapsedWidth,
   onToggle,
@@ -120,24 +121,25 @@ export default function Sider({
   ]
 
   const transSider = useSpring({
-    width: collapsed ? collapsedWidth : width,
+    width: collapsed ? collapsedWidth : fullWidth,
   })
 
   return (
     <animated.div style={transSider}>
       <Layout.Sider
         className={styles.sider}
-        width={width}
+        width={fullWidth}
         trigger={null}
         collapsible
         collapsed={collapsed}
-        collapsedWidth={width}
+        collapsedWidth={fullWidth}
+        defaultCollapsed={defaultCollapsed}
         theme="light"
       >
         <Banner
           collapsed={collapsed}
           onToggle={onToggle}
-          width={width}
+          fullWidth={fullWidth}
           collapsedWidth={collapsedWidth}
         />
         <TrailMenu
@@ -146,7 +148,6 @@ export default function Sider({
           mode="inline"
           selectedKeys={[activeAppId]}
           style={{ flexGrow: 1 }}
-          defaultOpenKeys={['debug']}
         />
         <TrailMenu
           items={extraMenuItems}

diff --git a/ui/dashboardApp/layout/main/index.js b/ui/dashboardApp/layout/main/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { Root } from '@lib/components'
-import { useToggle } from '@umijs/hooks'
+import { useLocalStorageState } from '@umijs/hooks'
 import { HashRouter as Router } from 'react-router-dom'
 import { useSpring, animated } from 'react-spring'
 
@@ -42,15 +42,18 @@ const useContentLeftOffset = (collapsed) => {
 }
 
 export default function App({ registry }) {
-  const { state: collapsed, toggle: toggleCollapsed } = useToggle()
+  const [collapsed, setCollapsed] = useLocalStorageState(
+    'layout.sider.collapsed',
+    false
+  )
+  const [defaultCollapsed] = useState(collapsed)
   const {
     contentLeftOffset,
     onAnimationStart,
     onAnimationFrame,
   } = useContentLeftOffset(collapsed)
   const transContentBack = useSpring({
     x: collapsed ? collapsedContentOffset : 0,
-    from: { x: 0 },
     onStart: onAnimationStart,
     onFrame: onAnimationFrame,
   })
@@ -60,14 +63,19 @@ export default function App({ registry }) {
     delay: 100,
   })
 
+  const handleToggle = useCallback(() => {
+    setCollapsed((c) => !c)
+  }, [setCollapsed])
+
   return (
     <Root>
       <Router>
         <animated.div className={styles.container} style={transContainer}>
           <Sider
             registry={registry}
-            width={siderWidth}
-            onToggle={() => toggleCollapsed()}
+            fullWidth={siderWidth}
+            onToggle={handleToggle}
+            defaultCollapsed={defaultCollapsed}
             collapsed={collapsed}
             collapsedWidth={siderCollapsedWidth}
             animationDelay={0}