From 8aefc82bebd44e8c983974d8b10aa0074169cea1 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Mon, 1 Apr 2024 17:45:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(menu):=20=E7=BE=8E=E5=8C=96=20Windows=20?=
 =?UTF-8?q?=E4=B8=AD=20sidebar=20=E9=A3=8E=E6=A0=BC=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=A0=B7=E5=BC=8F=20(#2782)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/rotten-beers-exercise.md      |  5 ++
 .changeset/stupid-dragons-boil.md        |  5 ++
 packages/ui/menu/src/Sidebar.tsx         | 62 ++++++++++++++----------
 packages/ui/menu/src/styles/sidebar.scss |  7 +--
 4 files changed, 51 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/rotten-beers-exercise.md
 create mode 100644 .changeset/stupid-dragons-boil.md

diff --git a/.changeset/rotten-beers-exercise.md b/.changeset/rotten-beers-exercise.md
new file mode 100644
index 000000000..f925905c1
--- /dev/null
+++ 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
new file mode 100644
index 000000000..b1de822e4
--- /dev/null
+++ 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
index 522e529f3..fccdea486 100644
--- 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
index 6fb1a1314..a11c34f0c 100644
--- 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;