score:1

Accepted answer
import React, { Component } from "react";
import "./Sidebar.css";
import { FaBars, FaTimes, FaUserAlt, FaRegMap } from "react-icons/fa";

class Sidebar extends Component {
  state = {
    isShow: false
  };

  handleClick = () => {
    this.setState({
      isShow: !this.state.isShow
    });
  };

  render() {
    return (
      <div className="user-container">
        <div
          className="user-sidebar-menu-icon"
          onClick={this.handleClick}
        >
          {this.state.isShow &&
            <FaBars className="user-sidebar-menu-icon-bars" />
          }
        </div>
        <div className={`sidebar ${this.state.isShow && 'isHideActive'}`}>
          <header>
            Setting
              <FaTimes onClick={this.handleClick} className="user-sidebar-menu-icon-times" />
          </header>
          <a href="#">
            <FaUserAlt className="user-sidebar-icon" />
            <span>Account</span>
          </a>
          <a href="#">
            <FaRegMap className="user-sidebar-icon" />
            <span>something</span>
          </a>
        </div>
      </div>
    );
  }
}

export default Sidebar;

Related Query

More Query from same tag