style: menu collapse button

src/global.less

@@ -239,8 +239,8 @@ body {
     height: 100%;
 
     .ant-pro-sider-footer {
-      padding-block: 2px 0;
-      padding-left: 6px;
+      padding-block: 4px 0;
+      padding-left: 8px;
     }
 
     .ant-pro-sider-actions-list-item {
@@ -268,30 +268,6 @@ body {
 
     .ant-pro-sider-logo-collapsed {
       padding-left: 6px;
-      cursor: e-resize;
-      display: flex;
-      gap: 6px;
-
-      .collapse-wrap {
-        display: none;
-        position: absolute;
-        top: 12px;
-
-        &::after {
-          content: '';
-          position: absolute;
-          height: 48px;
-          width: 64px;
-          top: -16px;
-          left: -16px;
-        }
-      }
-
-      &:hover {
-        .collapse-wrap {
-          display: block;
-        }
-      }
     }
   }
 

src/layouts/index.tsx

@@ -234,31 +234,7 @@ export default (props: any) => {
   }, [userSettings.collapsed]);
 
   const renderMenuHeader = (logo: React.ReactNode, title: React.ReactNode) => {
-    return (
-      <>
-        {logo}
-        <div onClick={handleToggleCollapse}>
-          <Button
-            className="collapse-btn"
-            style={{
-              marginRight: collapsed ? 0 : -6,
-              border: 'none',
-              cursor: 'w-resize'
-            }}
-            size="small"
-            type={'text'}
-          >
-            <IconFont
-              type={collapsed ? 'icon-expand-left' : 'icon-expand-right'}
-              className="font-size-18"
-              style={{
-                display: 'block'
-              }}
-            />
-          </Button>
-        </div>
-      </>
-    );
+    return <>{logo}</>;
   };
 
   const menuContentRender = (menuProps: any, defaultDom: React.ReactNode) => {
@@ -402,6 +378,22 @@ export default (props: any) => {
           openKeys={false}
           disableMobile={true}
           siderWidth={220}
+          menuFooterRender={() => (
+            <Button
+              style={{
+                border: 'none',
+                cursor: 'w-resize'
+              }}
+              size="small"
+              type={'text'}
+              onClick={handleToggleCollapse}
+            >
+              <IconFont
+                type={collapsed ? 'icon-expand-left' : 'icon-expand-right'}
+                className="font-size-18"
+              />
+            </Button>
+          )}
           onCollapse={onCollapse}
           onMenuHeaderClick={onMenuHeaderClick}
           menuHeaderRender={renderMenuHeader}