From 8bf264bcd21596c677d61154e6a33e77264a00f2 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Sun, 29 Nov 2020 23:37:43 +0800
Subject: [PATCH] fix issue for sider

---
 spug_web/src/layout/Sider.js | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/spug_web/src/layout/Sider.js b/spug_web/src/layout/Sider.js
index b0de8b3..c5bdabb 100644
--- a/spug_web/src/layout/Sider.js
+++ b/spug_web/src/layout/Sider.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Layout, Menu } from 'antd';
 import { hasPermission, history } from 'libs';
 import styles from './layout.module.less';
@@ -6,19 +6,21 @@ import menus from '../routes';
 import logo from './logo-spug.png';
 import logoText from './logo-text.png';
 
-const initPath = window.location.pathname;
-let openKeys = [];
-loop:
-  for (let item of menus.filter(x => x.child)) {
+let selectedKey = window.location.pathname;
+const OpenKeysMap = {};
+for (let item of menus) {
+  if (item.child) {
     for (let sub of item.child) {
-      if (sub.path === initPath) {
-        openKeys = [item.title]
-        break loop
-      }
+      if (sub.title) OpenKeysMap[sub.path] = item.title
     }
+  } else if (item.title) {
+    OpenKeysMap[item.path] = 1
   }
+}
 
 export default function Sider(props) {
+  const [openKeys, setOpenKeys] = useState([]);
+
   function makeMenu(menu) {
     if (menu.auth && !hasPermission(menu.auth)) return null;
     if (!menu.title) return null;
@@ -42,6 +44,14 @@ export default function Sider(props) {
     )
   }
 
+  const tmp = window.location.pathname;
+  const openKey = OpenKeysMap[tmp];
+  if (openKey) {
+    selectedKey = tmp;
+    if (openKey !== 1 && !openKeys.includes(openKey)) {
+      setOpenKeys([...openKeys, openKey])
+    }
+  }
   return (
     <Layout.Sider width={208} collapsed={props.collapsed} className={styles.sider}>
       <div className={styles.logo}>
@@ -53,8 +63,9 @@ export default function Sider(props) {
           theme="dark"
           mode="inline"
           className={styles.menus}
-          defaultSelectedKeys={[initPath]}
-          defaultOpenKeys={openKeys}
+          selectedKeys={[selectedKey]}
+          openKeys={openKeys}
+          onOpenChange={setOpenKeys}
           onSelect={menu => history.push(menu.key)}>
           {menus.map(menu => makeMenu(menu))}
         </Menu>