React+CSS实现导航栏抽屉效果

React部分

/**
 * @Author: 宇豪豪
 * @Date:   2023-06-25 09:36:01
 * @Last Modified by:   宇豪豪
 * @Last Modified time: 2023-06-27 10:54:58
 */

//操作首页
import React, { Component } from 'react'
import "./Index.css"
import "./Index.less"
// import { Button } from 'antd';
import { MenuFoldOutlined } from '@ant-design/icons';

export default class Home extends Component {
    state = {
        showElem: false,
        width: "256px",
        left: "260px"
    }

    //抽屉按钮
    dianji = () => {
        var kuan = "45px"
        var fang = "49px"
        if (this.state.width == "256px") {
            this.setState({
                showElem: true,
                width: kuan,
                left: fang
            })
        } else {
            kuan = "256px"
            fang = "260px"
            this.setState({
                showElem: true,
                width: kuan,
                left: fang
            })
        }
    }
    render() {
        const style = {
            width: this.state.width
        }
        const chouyi = {
            left: this.state.left
        }
        return (
            <div className='menu' style={style}>
                <button type="primary" className='chouti' onClick={this.dianji} style={chouyi}>  <MenuFoldOutlined /></button>
            </div>

        )
    }

}

CSS部分

/**
 * @Author: 宇豪豪
 * @Date:   2023-06-25 09:36:09
 * @Last Modified by:   宇豪豪
 * @Last Modified time: 2023-06-27 11:03:27
 */
.menu {
    position: relative;
    margin: 0;
    background-color: #001529;
    height: 100vh;
    overflow: hidden;
    /* 重要部分，实现抽屉效果的关键代码 */
    display: flex;
    transition: 0.3s ease;
}

.chouti {
    position: fixed;
    top: 10px;
    left: 260px;
    z-index: 999;
    width: 40px;
    height: 40px;
    border-radius: 0;
    background-color: #fff;
    box-shadow: none;
    color: #000;
    font-size: 20px;
    text-align: center;
    border: none;
    cursor: pointer;
    /* 重要部分，实现抽屉效果的关键代码 */
    display: flex;
    transition: 0.3s ease;
}