fix(menu): 美化 Windows 中 sidebar 风格菜单滚动条样式 (#2782)

XiaoMi · Apr 1, 2024 · 8aefc82 · 8aefc82
1 parent 8a40eba
commit 8aefc82
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 28 deletions.
diff --git a/.changeset/rotten-beers-exercise.md b/.changeset/rotten-beers-exercise.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/menu": patch
+---
+
+fix(menu): 美化 Windows 中 sidebar 风格菜单滚动条样式
diff --git a/.changeset/stupid-dragons-boil.md b/.changeset/stupid-dragons-boil.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/menu": patch
+---
+
+fix: 美化 Windows 中 sidebar 风格菜单滚动条样式
diff --git a/packages/ui/menu/src/Sidebar.tsx b/packages/ui/menu/src/Sidebar.tsx
@@ -14,6 +14,7 @@ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
 import { HiBaseHTMLProps } from '@hi-ui/core'
 import { useUncontrolledToggle } from '@hi-ui/use-toggle'
 import { isFunction } from '@hi-ui/type-assertion'
+import Scrollbar from '@hi-ui/scrollbar'
 import { MenuDataItem } from './types'
 import { getAncestorIds, getIdsWithChildren } from './util'
 import { Menu } from './Menu'
@@ -98,11 +99,18 @@ export const Sidebar = forwardRef<HTMLDivElement | null, SidebarProps>(
     const clickSidebar = useCallback(
       (id: React.ReactText, raw: MenuDataItem) => {
         if (sidebarActiveId === id) {
+          const menuData = data.find((item) => item.id === sidebarActiveId)?.children ?? []
+
+          if (menuData.length > 0) {
+            !showMenu ? menuToggleAction.on() : menuToggleAction.off()
+          }
+
           return
         }
+
         updateActiveId(id, raw)
       },
-      [sidebarActiveId, updateActiveId]
+      [data, menuToggleAction, showMenu, sidebarActiveId, updateActiveId]
     )
 
     const clickMenu = useCallback(
@@ -122,35 +130,39 @@ export const Sidebar = forwardRef<HTMLDivElement | null, SidebarProps>(
     return (
       <div className={cls} ref={wrapperRef}>
         <div className={cx(`${prefixCls}`, className)} ref={ref} role={role}>
-          <ul className={`${prefixCls}-list`}>
-            {data.map((item) => {
-              return (
-                <SidebarItem
-                  {...item}
-                  className={item.id === sidebarActiveId ? `${prefixCls}-item--active` : ''}
-                  render={() => render?.(item, 0)}
-                  key={item.id}
-                  onClick={() => clickSidebar(item.id, item)}
-                />
-              )
-            })}
-          </ul>
+          <Scrollbar onlyScrollVisible axes="y">
+            <ul className={`${prefixCls}-list`}>
+              {data.map((item) => {
+                return (
+                  <SidebarItem
+                    {...item}
+                    className={item.id === sidebarActiveId ? `${prefixCls}-item--active` : ''}
+                    render={() => render?.(item, 0)}
+                    key={item.id}
+                    onClick={() => clickSidebar(item.id, item)}
+                  />
+                )
+              })}
+            </ul>
+          </Scrollbar>
         </div>
         <div
           className={cx(`${prefixCls}-menu-wrapper`)}
           style={{ width: showMenu ? menuWidth : undefined }}
         >
-          <Menu
-            key={menuKey}
-            activeId={activeId}
-            data={menuDataMemo}
-            expandedIds={expandIds}
-            onExpand={updateExpandedIds}
-            onClick={clickMenu}
-            style={{ width: menuWidth }}
-            extraHeader={extraHeader}
-            render={render}
-          />
+          <Scrollbar onlyScrollVisible axes="y">
+            <Menu
+              key={menuKey}
+              activeId={activeId}
+              data={menuDataMemo}
+              expandedIds={expandIds}
+              onExpand={updateExpandedIds}
+              onClick={clickMenu}
+              style={{ width: menuWidth }}
+              extraHeader={extraHeader}
+              render={render}
+            />
+          </Scrollbar>
         </div>
         {menuDataMemo.length > 0 && showCollapse && (
           <div className={`${prefixCls}-toggle`} onClick={menuToggleAction.not}>

diff --git a/packages/ui/menu/src/styles/sidebar.scss b/packages/ui/menu/src/styles/sidebar.scss
@@ -53,7 +53,7 @@ $sidebar-prefix: '#{$component-prefix}-sidebar' !default;
   box-sizing: border-box;
   width: 64px;
   height: 100%;
-  padding: use-spacing(4) use-spacing(3);
+  padding: use-spacing(4) 0;
   overflow: auto;
   border-right: 1px solid use-color('gray', 300);
   background-color: #fff;
@@ -65,7 +65,7 @@ $sidebar-prefix: '#{$component-prefix}-sidebar' !default;
   &-item {
     @include list-item-reset;
 
-    margin-top: use-spacing(6);
+    margin: use-spacing(6) use-spacing(2) 0;
     padding: use-spacing(3) use-spacing(1);
     width: 52px;
     overflow: hidden;
@@ -176,13 +176,14 @@ $sidebar-prefix: '#{$component-prefix}-sidebar' !default;
 }
 
 .#{$sidebar-prefix}-toggle {
+  box-sizing: border-box;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 12px;
   height: 60px;
-  right: -12px;
+  right: -11px;
   top: 50%;
   transform: translateY(-50%);
   border-start-end-radius: 16px 8px;