You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import { observer } from 'mobx-react';
|
|
import { MouseEventHandler, useRef, useState } from 'react';
|
|
import { VerticalAlignTopOutlined } from '@ant-design/icons';
|
|
import styles from './index.less';
|
|
import classNames from 'classnames';
|
|
|
|
declare type MenuFooterProps = {
|
|
onCollapse: MouseEventHandler;
|
|
collapsed: boolean;
|
|
};
|
|
|
|
export const MenuFooter = observer(
|
|
({ collapsed, onCollapse }: MenuFooterProps) => {
|
|
const [visible, setVisible] = useState<boolean>(false);
|
|
const logoRef = useRef(null);
|
|
|
|
return (
|
|
<div
|
|
className={styles.btn}
|
|
onClick={() => setVisible(!visible)}
|
|
ref={logoRef}
|
|
>
|
|
<Item onClick={onCollapse} collapsed={collapsed} />
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
interface ItemProps {
|
|
onClick: MouseEventHandler;
|
|
collapsed: boolean;
|
|
}
|
|
const Item = observer(({ collapsed, onClick }: ItemProps) => {
|
|
const classes = classNames({
|
|
[styles['item']]: true,
|
|
});
|
|
return (
|
|
<div className={classes} onClick={onClick}>
|
|
<div className={styles.title}>
|
|
<VerticalAlignTopOutlined rotate={collapsed ? 90 : -90} />{' '}
|
|
{collapsed ? null : `收起菜单`}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|