style: side menu scroll bar

src/global.less

@@ -284,10 +284,6 @@ body {
         }
       }
     }
-
-    .ant-pro-sider .ant-layout-sider-children {
-      // border-right: 1px solid var(--ant-color-split);
-    }
   }
 
   .ant-table-content table {
@@ -347,7 +343,6 @@ body {
   .ant-pro-layout-container {
     overflow-x: auto;
     min-height: 100vh;
-    // background-color: var(--ant-color-bg-container);
   }
 
   .ant-pro-sider {
@@ -812,6 +807,8 @@ body {
 }
 
 .ant-pro-sider-logo + div {
+  display: flex;
+  overflow: hidden;
   &::-webkit-scrollbar {
     width: 0;
   }

src/layouts/index.tsx

@@ -21,11 +21,7 @@ import {
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
 import { ProLayout } from '@ant-design/pro-components';
-import {
-  CoreUIProvider,
-  IconFont,
-  useOverlayScroller
-} from '@gpustack/core-ui';
+import { CoreUIProvider, IconFont } from '@gpustack/core-ui';
 import {
   Access,
   Outlet,
@@ -135,9 +131,6 @@ const mapRoutes = (routes: IRoute[], role: string) => {
 };
 
 export default (props: any) => {
-  const { initialize: initialize } = useOverlayScroller({
-    defer: false
-  });
   const [, contextHolder] = Modal.useModal();
   const { themeData, setUserSettings, userSettings } = useUserSettings();
   const [userInfo] = useAtom(userAtom);

src/layouts/sider-menu.tsx

@@ -1,5 +1,5 @@
 import { CaretDownOutlined } from '@ant-design/icons';
-import { IconFont } from '@gpustack/core-ui';
+import { IconFont, OverlayScroller } from '@gpustack/core-ui';
 import { Link, useLocation } from '@umijs/max';
 import { Tooltip } from 'antd';
 import { createStyles, type FullToken } from 'antd-style';
@@ -29,12 +29,17 @@ const useStyles = createStyles(
 
     return {
       siderMenu: css`
+        width: 100%;
         &.sider-menu-collapsed {
           .menu-item {
             justify-content: center;
             padding: 0;
           }
         }
+        .os-scrollbar-vertical .os-scrollbar-handle {
+          min-width: 4px;
+          max-width: 4px;
+        }
       `,
       groupTitle: css`
         display: flex;
@@ -222,44 +227,55 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
         'sider-menu-collapsed': collapsed
       })}
     >
-      {menuData.map((item: MenuItem, index: number) => (
-        <div key={item.key}>
-          {item.children && item.children.length > 0 ? (
-            <>
-              <div
-                className={cx(styles.groupTitle, {
-                  'menu-item-group-title-collapsed': collapsed
-                })}
-                onClick={(e) => handleToggleGroup(e, item)}
-              >
-                {!collapsed ? (
-                  <span className="group-title-text">
-                    <span>{item.name}</span>
-                    <CaretDownOutlined
-                      rotate={collapseKeys.has(item.key) ? -90 : 0}
-                    ></CaretDownOutlined>
-                  </span>
-                ) : (
-                  <span className={styles.line}></span>
-                )}
-              </div>
-              <div
-                className={cx(styles.menuItemGroup, {
-                  'menu-item-group-collapsed': collapsed,
-                  'menu-item-group-hidden':
-                    !collapsed && collapseKeys.has(item.key)
-                })}
-              >
-                {item.children?.map((child: MenuItem) =>
-                  menuItemRender(child, child.key)
-                )}
-              </div>
-            </>
-          ) : (
-            menuItemRender(item, item.key)
-          )}
+      <OverlayScroller
+        styles={{
+          wrapper: {
+            paddingInline: 0,
+            maxHeight: '100%'
+          }
+        }}
+      >
+        <div>
+          {menuData.map((item: MenuItem, index: number) => (
+            <div key={item.key}>
+              {item.children && item.children.length > 0 ? (
+                <>
+                  <div
+                    className={cx(styles.groupTitle, {
+                      'menu-item-group-title-collapsed': collapsed
+                    })}
+                    onClick={(e) => handleToggleGroup(e, item)}
+                  >
+                    {!collapsed ? (
+                      <span className="group-title-text">
+                        <span>{item.name}</span>
+                        <CaretDownOutlined
+                          rotate={collapseKeys.has(item.key) ? -90 : 0}
+                        ></CaretDownOutlined>
+                      </span>
+                    ) : (
+                      <span className={styles.line}></span>
+                    )}
+                  </div>
+                  <div
+                    className={cx(styles.menuItemGroup, {
+                      'menu-item-group-collapsed': collapsed,
+                      'menu-item-group-hidden':
+                        !collapsed && collapseKeys.has(item.key)
+                    })}
+                  >
+                    {item.children?.map((child: MenuItem) =>
+                      menuItemRender(child, child.key)
+                    )}
+                  </div>
+                </>
+              ) : (
+                menuItemRender(item, item.key)
+              )}
+            </div>
+          ))}
         </div>
-      ))}
+      </OverlayScroller>
     </div>
   );
 };