@arcblock/ux 2.9.44 → 2.9.45

package/es/Layout/dashboard/index.js

@@ -123,7 +123,7 @@ function Dashboard({
       children: [/*#__PURE__*/_jsx(Hidden, {
         mdDown: true,
         children: !!links?.length && sidebarVisible && /*#__PURE__*/_jsx(Box, {
-          className: "dashboard-sidebar",
+          className: ['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' '),
           children: /*#__PURE__*/_jsx(Sidebar, {
             links: links,
             dense: _dense
@@ -208,6 +208,12 @@ const Wrapper = styled('div', {
       overflow-y: auto;
     }
   }
+  .dashboard-sidebar-padding {
+    &:hover {
+      padding-left: 15px;
+      overflow-y: auto;
+    }
+  }
   .dashboard-main {
     display: flex;
     flex-direction: column;

package/lib/Layout/dashboard/index.js

@@ -142,7 +142,7 @@ function Dashboard(_ref2) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
         mdDown: true,
         children: !!(links !== null && links !== void 0 && links.length) && sidebarVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          className: "dashboard-sidebar",
+          className: ['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' '),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
             links: links,
             dense: _dense
@@ -206,7 +206,7 @@ Dashboard.defaultProps = {
 };
 const Wrapper = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'sidebarWidth'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      min-width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-sidebar-padding {\n    &:hover {\n      padding-left: 15px;\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      min-width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
 const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"])));
 
 // 兼容旧版 dashboard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.44",
+  "version": "2.9.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -354,12 +354,12 @@
     "@mui/material": "^5.15.0",
     "react": ">=18.2.0"
   },
-  "gitHead": "07ad8adac9d7bfb9faec224a56f1524bfd5cc5fc",
+  "gitHead": "8b32fcb561bce3aafb464458b0e0123668ef6f6f",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.44",
-    "@arcblock/nft-display": "^2.9.44",
-    "@arcblock/react-hooks": "^2.9.44",
+    "@arcblock/icons": "^2.9.45",
+    "@arcblock/nft-display": "^2.9.45",
+    "@arcblock/react-hooks": "^2.9.45",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Layout/dashboard/index.js

@@ -94,7 +94,7 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
       <Box display="flex" className="dashboard-body">
         <Hidden mdDown>
           {!!links?.length && sidebarVisible && (
-            <Box className="dashboard-sidebar">
+            <Box className={['dashboard-sidebar', _dense ? '' : 'dashboard-sidebar-padding'].join(' ')}>
               <Sidebar links={links} dense={_dense} />
             </Box>
           )}
@@ -175,6 +175,12 @@ const Wrapper = styled('div', {
       overflow-y: auto;
     }
   }
+  .dashboard-sidebar-padding {
+    &:hover {
+      padding-left: 15px;
+      overflow-y: auto;
+    }
+  }
   .dashboard-main {
     display: flex;
     flex-direction: column;