(shenyu-dashboard) branch master updated: [type:fix] sider menu support resize (#537)

[liuhongyu]

This is an automated email from the ASF dual-hosted git repository.

liuhongyu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new bc2d0c62 [type:fix] sider menu support resize (#537)
bc2d0c62 is described below

commit bc2d0c627d97489bc509d5e679ab655893567832
Author: eye-gu <734164...@qq.com>
AuthorDate: Thu Aug 21 13:02:45 2025 +0800

    [type:fix] sider menu support resize (#537)
---
 src/components/SiderMenu/SiderMenu.js | 85 ++++++++++++++++++++++-------------
 1 file changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/components/SiderMenu/SiderMenu.js 
b/src/components/SiderMenu/SiderMenu.js
index a9188d8d..54ab0c00 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -19,6 +19,7 @@ import React, { PureComponent } from "react";
 import { Layout, Menu, Icon, Switch } from "antd";
 import pathToRegexp from "path-to-regexp";
 import { Link } from "dva/router";
+import { Resizable } from "react-resizable";
 import styles from "./index.less";
 import { urlToList } from "../_utils/pathTools";
 import { getCurrentLocale, getIntlContent } from "../../utils/IntlUtils";
@@ -86,6 +87,7 @@ export default class SiderMenu extends PureComponent {
       localeName: "",
       mode: "inline",
       theme: "dark",
+      width: 250,
     };
   }
 
@@ -276,6 +278,12 @@ export default class SiderMenu extends PureComponent {
     });
   };
 
+  onResize = (event, { size }) => {
+    this.setState({
+      width: size.width,
+    });
+  };
+
   /** Modify the menu based on the current language */
   updateMenuData() {
     if (this.props.menuData.length === 0) {
@@ -330,38 +338,55 @@ export default class SiderMenu extends PureComponent {
     }
 
     return (
-      <Sider
-        trigger={null}
-        collapsible
-        collapsed={collapsed}
-        breakpoint="lg"
-        onCollapse={onCollapse}
-        width={220}
-        className={styles.sider}
+      <Resizable
+        width={this.state.width}
+        height={0}
+        onResize={this.onResize}
+        draggableOpts={{ enableUserSelectHack: false }}
+        handle={
+          <span
+            className="react-resizable-handle"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          />
+        }
+        minConstraints={[200, 0]}
+        maxConstraints={[500, 0]}
       >
-        <Link to="/">
-          <div className={styles.logo} key="logo">
-            <img className={styles.TitleLogo} src={TitleLogo} alt="logo" />
-          </div>
-        </Link>
-        <Switch
-          onChange={this.changeMode}
-          checkedChildren="Change Mode"
-          unCheckedChildren="Change Mode"
-          className={styles.changeMode}
-        />
-        <Menu
-          key="Menu"
-          theme={this.state.theme}
-          mode={this.state.mode}
-          {...menuProps}
-          onOpenChange={this.handleOpenChange}
-          selectedKeys={selectedKeys}
-          style={{ padding: "16px 0", width: "100%" }}
+        <Sider
+          trigger={null}
+          collapsible
+          collapsed={collapsed}
+          breakpoint="lg"
+          onCollapse={onCollapse}
+          width={this.state.width}
+          className={styles.sider}
         >
-          {this.getNavMenuItems(menuData)}
-        </Menu>
-      </Sider>
+          <Link to="/">
+            <div className={styles.logo} key="logo">
+              <img className={styles.TitleLogo} src={TitleLogo} alt="logo" />
+            </div>
+          </Link>
+          <Switch
+            onChange={this.changeMode}
+            checkedChildren="Change Mode"
+            unCheckedChildren="Change Mode"
+            className={styles.changeMode}
+          />
+          <Menu
+            key="Menu"
+            theme={this.state.theme}
+            mode={this.state.mode}
+            {...menuProps}
+            onOpenChange={this.handleOpenChange}
+            selectedKeys={selectedKeys}
+            style={{ padding: "16px 0", width: "100%" }}
+          >
+            {this.getNavMenuItems(menuData)}
+          </Menu>
+        </Sider>
+      </Resizable>
     );
   }
 }