@arcblock/ux 2.1.34 → 2.1.37

package/lib/Header/auto-hidden.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["height"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
+ */
+function AutoHidden(_ref) {
+  let {
+    height
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread({
+    height: height
+  }, rest));
+}
+
+AutoHidden.propTypes = {
+  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+};
+const Root = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "auto-hidden__Root",
+  componentId: "sc-1vwixkj-0"
+})(["overflow:hidden;&:before{content:'';display:inline-block;width:1px;height:100%;float:left;}> *{float:left;white-space:nowrap;}"]);
+var _default = AutoHidden;
+exports.default = _default;

package/lib/Header/header.js

@@ -15,6 +15,8 @@ var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _styles = require("@mui/material/styles");
 
+var _autoHidden = _interopRequireDefault(require("./auto-hidden"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend"];
@@ -55,20 +57,29 @@ function Header(_ref) {
       children: [prepend, logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "header-logo",
         children: logo
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "header-brand",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "header-brand-title",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-            children: brand
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoHidden.default, {
+        height: 44,
+        sx: {
+          flexShrink: {
+            xs: 1,
+            md: 0
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "header-brand",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "header-brand-title",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              children: brand
+            })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "header-brand-addon",
-            children: brandAddon
+            className: "header-brand-desc",
+            children: description
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "header-brand-desc",
-          children: description
-        })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "header-brand-addon",
+        children: brandAddon
       }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         flexGrow: 1
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -107,7 +118,7 @@ Header.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:44px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;a{color:inherit;text-decoration:none;}.header-brand-title{display:flex;align-items:center;h2{margin:0;font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:44px;margin-right:16px;img,svg{width:auto;height:100%;max-height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;justify-content:center;height:44px;margin-right:16px;line-height:1;a{color:inherit;text-decoration:none;}.header-brand-title{display:flex;align-items:center;h2{margin:0;font-size:16px;}}.header-brand-desc{margin-top:4px;color:#9397a1;}}.header-brand-addon{margin-right:16px;}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{.header-brand-title{h2{font-size:13px;}}.header-brand-desc{font-size:12px;}}.header-brand-addon{display:none;}}"], props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 
 var _default = Header;
 exports.default = _default;

package/lib/Header/responsive-header.js

@@ -13,8 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+
 var _styles = require("@mui/material/styles");
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
@@ -61,14 +65,8 @@ function ResponsiveHeader(_ref) {
   const _children = typeof children === 'function' ? children({
     isMobile,
     closeMenu: () => setDrawerOpen(false)
-  }) : children;
+  }) : children; // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
 
-  const {
-    logo,
-    brand,
-    brandAddon,
-    description
-  } = rest; // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
 
   if (!children) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, _objectSpread({
@@ -78,41 +76,38 @@ function ResponsiveHeader(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({
     prepend: prepend || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-      color: "inherit",
+      sx: {
+        color: theme.palette.grey[500]
+      },
       edge: "start",
       className: "header-menu",
-      onClick: () => setDrawerOpen(true),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {})
+      onClick: () => setDrawerOpen(!drawerOpen),
+      children: drawerOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {})
     })
   }, rest), {}, {
-    logo: isMobile ? null : logo,
     $theme: theme,
     children: [!isMobile && _children, isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
       open: drawerOpen,
       onClose: () => setDrawerOpen(false),
       ModalProps: {
         disablePortal: false,
-        keepMounted: true
+        keepMounted: true,
+        BackdropComponent: null
+      },
+      anchor: "top",
+      sx: {
+        top: 64,
+        zIndex: theme.zIndex.appBar - 1
+      },
+      PaperProps: {
+        style: {
+          top: 64,
+          bottom: 0,
+          boxShadow: 'none'
+        }
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Sidebar, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "header-sidebar-head",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "header-sidebar-logo",
-            children: logo
-          }), brand && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-            children: brand
-          }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            className: "header-sidebar-description",
-            children: description
-          }), brandAddon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "header-sidebar-brandaddon",
-            children: brandAddon
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "header-sidebar-content",
-          children: _children
-        })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuPanel, {
+        children: _children
       })
     })]
   }));
@@ -128,15 +123,10 @@ ResponsiveHeader.defaultProps = _objectSpread({}, _header.default.defaultProps);
 const Root = (0, _styledComponents.default)(_header.default).withConfig({
   displayName: "responsive-header__Root",
   componentId: "sc-1dugv47-0"
-})([".header-menu{display:none;}", "{.header-menu{display:block;}}"], props => props.$theme.breakpoints.down('md'));
-/**
- * Sidebar
- */
-
-const Sidebar = _styledComponents.default.div.withConfig({
-  displayName: "responsive-header__Sidebar",
+})([".header-menu{display:none;}", "{.header-menu{display:flex;margin-right:12px;}}"], props => props.$theme.breakpoints.down('md'));
+const MenuPanel = (0, _styledComponents.default)(_Container.default).withConfig({
+  displayName: "responsive-header__MenuPanel",
   componentId: "sc-1dugv47-1"
-})(["min-width:280px;font-size:14px;.header-sidebar-head{display:flex;flex-direction:column;align-items:center;padding:24px 0;border-bottom:1px solid #eee;font-size:12px;.header-sidebar-logo{min-width:44px;height:44px;font-size:44px;> *{width:auto;height:100%;}> a{display:block;}img{max-width:100%;max-height:100%;}}h2{margin-top:12px;font-size:14px;}.header-sidebar-description{margin:2px 0 0 0;}.header-sidebar-brandaddon{margin-top:8px;}}.header-sidebar-content{padding:16px 0;}"]);
-
+})(["padding-top:8px;padding-bottom:16px;.navmenu{margin:0 -16px;.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{border:0;}}"]);
 var _default = ResponsiveHeader;
 exports.default = _default;

package/lib/Layout/dashboard/index.js

@@ -94,6 +94,7 @@ function Dashboard(_ref2) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmet.default, {
       title: title
     }, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
+      $theme: theme,
       children: _ref3 => {
         let {
           isMobile,
@@ -158,7 +159,7 @@ const Wrapper = _styledComponents.default.div.withConfig({
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "dashboard__StyledUxHeader",
   componentId: "sc-arvc7q-1"
-})([".header-container{max-width:100%;}.header-logo{display:flex;justify-content:center;width:56px;}"]); // 兼容旧版 dashboard
+})([".header-container{max-width:100%;}", "{.header-logo{display:flex;justify-content:center;width:56px;}}"], props => props.$theme.breakpoints.up('md')); // 兼容旧版 dashboard
 
 function DashboardWrapper(_ref4) {
   let {

package/lib/NavMenu/nav-menu.js

@@ -104,10 +104,14 @@ function NavMenu(_ref) {
     });
   }, [state, mode, activate, open, close]);
   (0, _react.useEffect)(() => {
-    if (activeId) {
-      activate(activeId);
+    // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
+    // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
+    if (activeId !== undefined && activeId !== null) {
+      setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        activeId
+      }));
     }
-  }, [activate, activeId]);
+  }, [activeId]);
   const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(mode), rest.className);
 
   const renderItem = (item, index) => {

package/lib/NavMenu/style.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const NavMenuBase = _styledComponents.default.nav.withConfig({
   displayName: "style__NavMenuBase",
   componentId: "sc-2g7isz-0"
-})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{width:auto;max-height:20px;font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{width:auto;height:22px;max-height:22px;font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 
 const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__HorizontalStyle",
@@ -24,5 +24,5 @@ exports.HorizontalStyle = HorizontalStyle;
 const InlineStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__InlineStyle",
   componentId: "sc-2g7isz-2"
-})([".navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}& .navmenu-sub{flex-wrap:wrap;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:32px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;flex:1 0 100%;margin:0 -16px;padding-bottom:8px;.navmenu-item,.navmenu-sub{line-height:32px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:32px;font-size:13px;}}.navmenu-root > .navmenu-sub{&.navmenu-sub--opened{background:#eee;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
+})(["font-size:16px;.navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}& .navmenu-sub{flex-wrap:wrap;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:42px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;flex:1 0 100%;margin:0 -16px;padding-bottom:8px;.navmenu-item,.navmenu-sub{line-height:32px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:42px;font-size:13px;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
 exports.InlineStyle = InlineStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.34",
+  "version": "2.1.37",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "cf0c00b60dfa2819e06e0e063614b99eeb392c79",
+  "gitHead": "4b1bb7cefb268cc14e165197a417bfe52ca79711",
   "dependencies": {
-    "@arcblock/icons": "^2.1.34",
-    "@arcblock/react-hooks": "^2.1.34",
+    "@arcblock/icons": "^2.1.37",
+    "@arcblock/react-hooks": "^2.1.37",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Header/auto-hidden.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Box from '@mui/material/Box';
+
+/**
+ * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
+ */
+function AutoHidden({ height, ...rest }) {
+  return <Root height={height} {...rest} />;
+}
+
+AutoHidden.propTypes = {
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+};
+
+const Root = styled(Box)`
+  overflow: hidden;
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 100%;
+    float: left;
+  }
+  > * {
+    float: left;
+    white-space: nowrap;
+  }
+`;
+
+export default AutoHidden;

package/src/Header/header.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import { useTheme } from '@mui/material/styles';
+import AutoHidden from './auto-hidden';
 
 /**
  * Header 组件
@@ -15,13 +16,15 @@ function Header({ logo, brand, brandAddon, description, children, addons, prepen
       <Container className="header-container">
         {prepend}
         {logo && <div className="header-logo">{logo}</div>}
-        <div className="header-brand">
-          <div className="header-brand-title">
-            <h2>{brand}</h2>
-            <div className="header-brand-addon">{brandAddon}</div>
+        <AutoHidden height={44} sx={{ flexShrink: { xs: 1, md: 0 } }}>
+          <div className="header-brand">
+            <div className="header-brand-title">
+              <h2>{brand}</h2>
+            </div>
+            <div className="header-brand-desc">{description}</div>
           </div>
-          <div className="header-brand-desc">{description}</div>
-        </div>
+        </AutoHidden>
+        <div className="header-brand-addon">{brandAddon}</div>
         {children}
         <Box flexGrow={1} />
         <div className="header-addons">{addons}</div>
@@ -75,6 +78,7 @@ const Root = styled.div`
     svg {
       width: auto;
       height: 100%;
+      max-height: 100%;
     }
     > a {
       height: 100%;
@@ -93,8 +97,10 @@ const Root = styled.div`
   .header-brand {
     display: flex;
     flex-direction: column;
-    flex-shrink: 0;
+    justify-content: center;
+    height: 44px;
     margin-right: 16px;
+    line-height: 1;
     a {
       color: inherit;
       text-decoration: none;
@@ -106,14 +112,15 @@ const Root = styled.div`
         margin: 0;
         font-size: 16px;
       }
-      .header-brand-addon {
-        margin-left: 8px;
-      }
     }
     .header-brand-desc {
+      margin-top: 4px;
       color: #9397a1;
     }
   }
+  .header-brand-addon {
+    margin-right: 16px;
+  }
   .header-addons {
     display: flex;
     align-items: center;
@@ -129,9 +136,6 @@ const Root = styled.div`
     }
   }
   ${(props) => props.$theme.breakpoints.down('md')} {
-    .header-container {
-      height: 56px;
-    }
     .header-menu {
       display: inline-block;
     }
@@ -139,6 +143,16 @@ const Root = styled.div`
       height: 32px;
     }
     .header-brand {
+      .header-brand-title {
+        h2 {
+          font-size: 13px;
+        }
+      }
+      .header-brand-desc {
+        font-size: 12px;
+      }
+    }
+    .header-brand-addon {
       display: none;
     }
   }

package/src/Header/responsive-header.js

@@ -2,7 +2,9 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
 import Button from '@mui/material/IconButton';
+import Container from '@mui/material/Container';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Drawer from '@mui/material/Drawer';
@@ -21,7 +23,6 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const _children =
     typeof children === 'function' ? children({ isMobile, closeMenu: () => setDrawerOpen(false) }) : children;
-  const { logo, brand, brandAddon, description } = rest;
   // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
   if (!children) {
     return <Header prepend={prepend} {...rest} />;
@@ -30,29 +31,27 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
     <Root
       prepend={
         prepend || (
-          <Button color="inherit" edge="start" className="header-menu" onClick={() => setDrawerOpen(true)}>
-            <MenuIcon />
+          <Button
+            sx={{ color: theme.palette.grey[500] }}
+            edge="start"
+            className="header-menu"
+            onClick={() => setDrawerOpen(!drawerOpen)}>
+            {drawerOpen ? <CloseIcon /> : <MenuIcon />}
           </Button>
         )
       }
       {...rest}
-      logo={isMobile ? null : logo}
       $theme={theme}>
       {!isMobile && _children}
       {isMobile && (
         <Drawer
           open={drawerOpen}
           onClose={() => setDrawerOpen(false)}
-          ModalProps={{ disablePortal: false, keepMounted: true }}>
-          <Sidebar>
-            <div className="header-sidebar-head">
-              <div className="header-sidebar-logo">{logo}</div>
-              {brand && <h2>{brand}</h2>}
-              {description && <p className="header-sidebar-description">{description}</p>}
-              {brandAddon && <div className="header-sidebar-brandaddon">{brandAddon}</div>}
-            </div>
-            <div className="header-sidebar-content">{_children}</div>
-          </Sidebar>
+          ModalProps={{ disablePortal: false, keepMounted: true, BackdropComponent: null }}
+          anchor="top"
+          sx={{ top: 64, zIndex: theme.zIndex.appBar - 1 }}
+          PaperProps={{ style: { top: 64, bottom: 0, boxShadow: 'none' } }}>
+          <MenuPanel>{_children}</MenuPanel>
         </Drawer>
       )}
     </Root>
@@ -77,53 +76,21 @@ const Root = styled(Header)`
   }
   ${(props) => props.$theme.breakpoints.down('md')} {
     .header-menu {
-      display: block;
+      display: flex;
+      margin-right: 12px;
     }
   }
 `;
 
-/**
- * Sidebar
- */
-const Sidebar = styled.div`
-  min-width: 280px;
-  font-size: 14px;
-  .header-sidebar-head {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 24px 0;
-    border-bottom: 1px solid #eee;
-    font-size: 12px;
-    .header-sidebar-logo {
-      min-width: 44px;
-      height: 44px;
-      font-size: 44px;
-      > * {
-        width: auto;
-        height: 100%;
-      }
-      > a {
-        display: block;
-      }
-      img {
-        max-width: 100%;
-        max-height: 100%;
-      }
+const MenuPanel = styled(Container)`
+  padding-top: 8px;
+  padding-bottom: 16px;
+  .navmenu {
+    margin: 0 -16px;
+    .navmenu-root > .navmenu-item,
+    .navmenu-root > .navmenu-sub {
+      border: 0;
     }
-    h2 {
-      margin-top: 12px;
-      font-size: 14px;
-    }
-    .header-sidebar-description {
-      margin: 2px 0 0 0;
-    }
-    .header-sidebar-brandaddon {
-      margin-top: 8px;
-    }
-  }
-  .header-sidebar-content {
-    padding: 16px 0;
   }
 `;
 

package/src/Layout/dashboard/index.js

@@ -42,7 +42,7 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
     <Wrapper {...rest} className={`dashboard ${rest.className}`}>
       <Helmet title={title} key={title} />
 
-      <StyledUxHeader {...headerProps}>
+      <StyledUxHeader {...headerProps} $theme={theme}>
         {({ isMobile, closeMenu }) => {
           if (isMobile) {
             return (
@@ -123,11 +123,13 @@ const StyledUxHeader = styled(ResponsiveHeader)`
   .header-container {
     max-width: 100%;
   }
-  .header-logo {
-    display: flex;
-    justify-content: center;
-    /* logo 与 sidebar 中的 icon 垂直对齐, 104 - 24 * 2 = 56 */
-    width: 56px;
+  ${(props) => props.$theme.breakpoints.up('md')} {
+    .header-logo {
+      display: flex;
+      justify-content: center;
+      /* logo 与 sidebar 中的 icon 垂直对齐, 104 - 24 * 2 = 56 */
+      width: 56px;
+    }
   }
 `;
 

package/src/NavMenu/nav-menu.js

@@ -54,10 +54,12 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
   }, [state, mode, activate, open, close]);
 
   useEffect(() => {
-    if (activeId) {
-      activate(activeId);
+    // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
+    // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
+    if (activeId !== undefined && activeId !== null) {
+      setState((prev) => ({ ...prev, activeId }));
     }
-  }, [activate, activeId]);
+  }, [activeId]);
 
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
   const renderItem = (item, index) => {

package/src/NavMenu/style.js

@@ -64,7 +64,8 @@ const NavMenuBase = styled.nav`
   .navmenu-item-icon > *,
   .navmenu-sub-icon > * {
     width: auto;
-    max-height: 20px;
+    height: 22px;
+    max-height: 22px;
     font-size: 1.5em;
   }
   .navmenu-sub-expand-icon {
@@ -123,6 +124,7 @@ export const HorizontalStyle = styled(NavMenuBase)`
 
 /* inline mode */
 export const InlineStyle = styled(NavMenuBase)`
+  font-size: 16px;
   .navmenu-root {
     display: flex;
     flex-direction: column;
@@ -144,7 +146,7 @@ export const InlineStyle = styled(NavMenuBase)`
   /* icon */
   .navmenu-item-icon,
   .navmenu-sub-icon {
-    width: 32px;
+    width: 42px;
     margin: 0;
   }
   .navmenu-sub-expand-icon {
@@ -165,16 +167,11 @@ export const InlineStyle = styled(NavMenuBase)`
     padding-left: 16px;
     .navmenu-item,
     .navmenu-sub {
-      padding-left: 32px;
+      padding-left: 42px;
       font-size: 13px;
     }
   }
   /* 二级 menu */
-  .navmenu-root > .navmenu-sub {
-    &.navmenu-sub--opened {
-      background: #eee;
-    }
-  }
   .navmenu-sub--opened > .navmenu-sub-container {
     display: block;
   }