在reactjs中从左边滑动菜单

Question

所有，我正在研究Reactjs / redux web项目，我有一个响应式菜单，通过单击汉堡菜单按钮从侧面打开，菜单工作正常，但我想添加用户可以打开的功能从左侧滑动菜单，任何人都可以帮助我如何继续刷卡功能，我的代码附在下面，提前谢谢

       class SidePanel extends React.Component {
    state: {
        showModal: Object,
        showAccountSubMenu: boolean,
        showCategorySubMenu: boolean,
    };
    toggleModal: Function;
    constructor() {
        super();
        this.state = {
            showModal: {
                currency: false,
                country: false,
                language: false,
            },
            showAccountSubMenu: false,
            showCategorySubMenu: false,
        };
        this.toggleModal = this.toggleModal.bind(this);
    }
    handleClickOutside() {
        if (this.props.showMenu) {
            this.props.toggleMenu(false);
        }
    }
    toggleModal(type) {
        if (typeof this.state.showModal[type] !== 'undefined') {
            const showModal = this.state.showModal;
            showModal[type] = !showModal[type];
            this.setState(showModal);
        }
    }

    renderAccountSubMenu() {
        const myAccLink = '/account';
        const links = {
            cart: '/cart',
            userAccount: myAccLink + '/profile',
            userOrders: myAccLink + '/orders',
            userAddresses: myAccLink + '/addresses',
            userPayments: myAccLink + '/payment',
            userReturns: myAccLink + '/returns',
            userStoreCredits: myAccLink + '/store-credits',
        };
        return (
            <div>
                <button
                    className={styles.menuLink}
                    onClick={() => this.setState({ showAccountSubMenu: false })}
                >
                    <Icon
                        name={this.props.language === 'ar' ? 'angle-right' : 'angle-left'}
                        className={styles.iconReturn}
                    />
                    <span className={styles.menuText}>
                        {I18n.getText('sidebar.back-to-main-menu', {}, 'Back To Main Menu')}
                    </span>
                </button>
                <p className={styles.title}>{I18n.getText('header.user-account', {}, 'My Account')}</p>
                <a className={styles.menuLink} onClick={this.props.logout}>
                    <Icon name="power" className={styles.icon} />
                    <div className={styles.menuText}>
                        <div>{I18n.getText('header.sign-out', {}, 'Sign Out')}</div>
                    </div>
                </a>
            </div>
        );
    }

    render() {
        const links = {
            signin: '/login',
            signup: '/login/signup',
        };
        if (this.props.currentPath) {
            links.signin += '?redirect=' + this.props.currentPath;
            links.signup += '?redirect=' + this.props.currentPath;
        }
        return (
            <div className={styles.container} id="sideMenu">
                <div className={styles.content}>
                    {/* HOME / SIGN IN SIGN UP OR ACCOUNT TRIGGER START */}
                    {(!this.state.showAccountSubMenu && !this.state.showCategorySubMenu) &&
                        <div className={styles.mainMenu}>
                            <LocaleLink
                                className={styles.menuLink}
                                to={'/'} onClick={() => this.props.toggleMenu(false)}
                            >
                                <Icon name="home-o" className={styles.icon} />
                                <div className={styles.menuText}>{I18n.getText('sidebar.home', {}, 'Home')}</div>
                            </LocaleLink>
                            {this.props.user
                                ? <button
                                    className={styles.menuLink}
                                    onClick={() => this.setState({ showAccountSubMenu: true })}
                                >
                                    <Icon name="user" className={styles.icon} />
                                    <span className={styles.menuText}>
                                        {I18n.getText('header.user-account', {}, 'My Account')}
                                    </span>
                                    <Icon
                                        name={this.props.language === 'ar' ? 'angle-left' : 'angle-right'}
                                        className={styles.iconArrow}
                                    />
                                </button>
                                : <div>
                                    <LocaleLink
                                        className={styles.menuLink}
                                        to={links.signin}
                                        onClick={() => this.props.toggleMenu(false)}
                                        >
                                        <Icon name="user-signin" className={styles.icon} />
                                        <div className={styles.menuText}>
                                            {I18n.getText('sidebar.sign-in', {}, 'Sign In')}
                                        </div>
                                    </LocaleLink>
                                </div>
                            }
                            <div className={styles.seperator} />
                        </div>
                    }
                    {/* HOME / SIGN IN SIGN UP OR ACCOUNT TRIGGER END */}

                    {/* ACCOUNT SUBMENU START */}
                    {this.state.showAccountSubMenu && this.renderAccountSubMenu()}
                    {/* ACCOUNT SUBMENU END */}

                    {/* CATEGORIES START */}
                    {!this.state.showAccountSubMenu && <CategorySelector
                        categories={this.props.categories}
                        language={this.props.language}
                        toggleMenu={(showMenu) => this.props.toggleMenu(showMenu)}
                        toggleCatSubMenu={(showMenu) => this.setState({ showCategorySubMenu: showMenu })}
                    />}
                    {/* CATEGORIES END */}
                </div>
            </div>
        );
    }
}