react / css - transform animation - move an element when click

user_14600326 0
Viewed 368

I am quite new to React. I've created a sidebar component. The problem is that I am unable to make animation working well for moving the close menu icon to the left. What I expect is that the menu icon move to the left same with the whole sidebar when I click the close menu icon.

In my css, i add a class to the close menu icon, but no animation works

.user-sidebar-menu-icon-times {
  transform: translateX(0px);
}

.user-sidebar-menu-icon-times.moveleft {
  transform: translateX(-500px);
}

and some click handler controlling the toggle

{this.state.isClicked ? (
 <FaBars className="user-sidebar-menu-icon-bars" />
) : this.state.isShow ? (
 <FaTimes className="user-sidebar-menu-icon-times moveleft" />
) : (
 <FaTimes className="user-sidebar-menu-icon-times" />
)}

Here is the sandbox link showing my problem: https://codesandbox.io/s/adoring-greider-iss80?file=/src/components/Sidebar/Sidebar.js

Any help is highly appreciated!

reactjs css
1 Answers

something like this, don't need two states, also I think you should be able to delete some css, too

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;
user_70412350
Related