style: menu collapse button
This commit is contained in:
+2
-26
@@ -239,8 +239,8 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.ant-pro-sider-footer {
|
.ant-pro-sider-footer {
|
||||||
padding-block: 2px 0;
|
padding-block: 4px 0;
|
||||||
padding-left: 6px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-pro-sider-actions-list-item {
|
.ant-pro-sider-actions-list-item {
|
||||||
@@ -268,30 +268,6 @@ body {
|
|||||||
|
|
||||||
.ant-pro-sider-logo-collapsed {
|
.ant-pro-sider-logo-collapsed {
|
||||||
padding-left: 6px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+17
-25
@@ -234,31 +234,7 @@ export default (props: any) => {
|
|||||||
}, [userSettings.collapsed]);
|
}, [userSettings.collapsed]);
|
||||||
|
|
||||||
const renderMenuHeader = (logo: React.ReactNode, title: React.ReactNode) => {
|
const renderMenuHeader = (logo: React.ReactNode, title: React.ReactNode) => {
|
||||||
return (
|
return <>{logo}</>;
|
||||||
<>
|
|
||||||
{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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const menuContentRender = (menuProps: any, defaultDom: React.ReactNode) => {
|
const menuContentRender = (menuProps: any, defaultDom: React.ReactNode) => {
|
||||||
@@ -402,6 +378,22 @@ export default (props: any) => {
|
|||||||
openKeys={false}
|
openKeys={false}
|
||||||
disableMobile={true}
|
disableMobile={true}
|
||||||
siderWidth={220}
|
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}
|
onCollapse={onCollapse}
|
||||||
onMenuHeaderClick={onMenuHeaderClick}
|
onMenuHeaderClick={onMenuHeaderClick}
|
||||||
menuHeaderRender={renderMenuHeader}
|
menuHeaderRender={renderMenuHeader}
|
||||||
|
|||||||
Reference in New Issue
Block a user