This is an automated email from the ASF dual-hosted git repository.
dengliming 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 30a17b7f Update SiderMenu (#233)
30a17b7f is described below
commit 30a17b7fa519d173e712548e978f6f9b98f586d5
Author: WeiS <[email protected]>
AuthorDate: Mon Aug 29 23:15:02 2022 +0800
Update SiderMenu (#233)
---
src/components/SiderMenu/SiderMenu.js | 35 +++++++++++++++++---------------
src/components/SiderMenu/index.less | 38 ++++++++++++++++++++---------------
2 files changed, 41 insertions(+), 32 deletions(-)
diff --git a/src/components/SiderMenu/SiderMenu.js
b/src/components/SiderMenu/SiderMenu.js
index a64a03c0..7880c1be 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -16,7 +16,7 @@
*/
import React, { PureComponent } from "react";
-import { Layout, Menu, Icon } from "antd";
+import { Layout, Menu, Icon, Switch } from "antd";
import pathToRegexp from "path-to-regexp";
import { Link } from "dva/router";
import styles from "./index.less";
@@ -83,7 +83,9 @@ export default class SiderMenu extends PureComponent {
this.flatMenuKeys = getFlatMenuKeys(props.menuData);
this.state = {
openKeys: this.getDefaultCollapsedSubMenus(props),
- localeName: ""
+ localeName: "",
+ mode: "inline",
+ theme: "dark"
};
}
@@ -253,14 +255,17 @@ export default class SiderMenu extends PureComponent {
};
handleOpenChange = openKeys => {
- const lastOpenKey = openKeys[openKeys.length - 1];
- const moreThanOne =
- openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
this.setState({
- openKeys: moreThanOne ? [lastOpenKey] : [...openKeys]
+ openKeys: [...openKeys]
});
};
+ changeMode = (value) => {
+ this.setState({
+ mode: value ? "vertical" : 'inline'
+ })
+ }
+
/** Modify the menu based on the current language */
updateMenuData() {
if (this.props.menuData.length === 0) {
@@ -302,11 +307,6 @@ export default class SiderMenu extends PureComponent {
const { menuData, collapsed, onCollapse, TitleLogo } = this.props;
const { openKeys } = this.state;
// Don't show popup menu when it is been collapsed
- const menuProps = collapsed
- ? {}
- : {
- openKeys
- };
// if pathname can't match, use the nearest parent's key
let selectedKeys = this.getSelectedMenuKeys();
if (!selectedKeys.length) {
@@ -328,13 +328,16 @@ export default class SiderMenu extends PureComponent {
<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="dark"
- mode="inline"
- {...menuProps}
- onOpenChange={this.handleOpenChange}
- selectedKeys={selectedKeys}
+ theme={this.state.theme}
+ mode={this.state.mode}
style={{ padding: "16px 0", width: "100%" }}
>
{this.getNavMenuItems(menuData)}
diff --git a/src/components/SiderMenu/index.less
b/src/components/SiderMenu/index.less
index ea970689..e078ecdb 100644
--- a/src/components/SiderMenu/index.less
+++ b/src/components/SiderMenu/index.less
@@ -17,6 +17,7 @@
@import "~antd/lib/style/themes/default.less";
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+
.logo {
height: 64px;
position: relative;
@@ -32,18 +33,22 @@
width: 32px;
height: 32px;
}
- .TitleLogo{
+
+ .TitleLogo {
width: 184px;
height: 184px;
}
+
.systemTitle {
color: #ffffff;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 600;
+
.title {
font-size: 18px;
line-height: 18px;
}
+
.subTitle {
font-size: 14px;
line-height: 17px;
@@ -56,10 +61,13 @@
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
position: relative;
z-index: 10;
+
&.ligth {
background-color: white;
+
.logo {
background: white;
+
h1 {
color: #002140;
}
@@ -67,6 +75,10 @@
}
}
+.changeMode {
+ margin: 10px 0px 0px 20px !important;
+}
+
.icon {
width: 14px;
margin-right: 10px;
@@ -76,27 +88,21 @@
.drawer .drawer-content {
background: #001529;
}
+
.ant-menu-inline-collapsed {
- & > .ant-menu-item .sider-menu-item-img + span,
- &
- > .ant-menu-item-group
- > .ant-menu-item-group-list
- > .ant-menu-item
- .sider-menu-item-img
- + span,
- &
- > .ant-menu-submenu
- > .ant-menu-submenu-title
- .sider-menu-item-img
- + span {
+
+ &>.ant-menu-item .sider-menu-item-img+span,
+ &>.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item
.sider-menu-item-img+span,
+ &>.ant-menu-submenu>.ant-menu-submenu-title .sider-menu-item-img+span {
max-width: 0;
display: inline-block;
opacity: 0;
}
}
- .ant-menu-item .sider-menu-item-img + span,
- .ant-menu-submenu-title .sider-menu-item-img + span {
+
+ .ant-menu-item .sider-menu-item-img+span,
+ .ant-menu-submenu-title .sider-menu-item-img+span {
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
opacity: 1;
}
-}
+}
\ No newline at end of file
