title: Reactjs Showing Sidebar Menu with animation
body: <p>I need some insight pls.
  I tried to build a sidebar menu with an animation that will show from left -100% to 100% fullscreen when state is true and close from 100% fullscreen to left -100% when the state is false.</p>
  <p>The animation works when the state is true but the animation doesn't work when closing the sidebar menu.</p>
  <p>Btw if there's a better approach for this pattern please let me know. Thank you in advance !</p>
  <pre><code>const PhoneNavigation = ({ handleClose, open }) =&gt; {
    return (
      &lt;nav className={open ? &quot;show_side_bar&quot; : &quot;close_side_bar&quot;}&gt;
        &lt;span onClick={handleClose}&gt;X&lt;/span&gt;
        &lt;ul&gt;
          &lt;li className=&quot;subMenu navItem&quot;&gt;
            &lt;a href=&quot;/&quot;&gt;Courses&lt;/a&gt;
          &lt;/li&gt;
          &lt;li className=&quot;navItem&quot;&gt;
            &lt;a href=&quot;/&quot;&gt;Pricing&lt;/a&gt;
          &lt;/li&gt;
          &lt;li className=&quot;navItem&quot;&gt;
            &lt;a href=&quot;/&quot;&gt;Mission&lt;/a&gt;
          &lt;/li&gt;
          &lt;li className=&quot;subMenu navItem&quot;&gt;
            &lt;a href=&quot;/&quot;&gt;About us&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    );
  };
  
  export default PhoneNavigation;
  </code></pre>
  <h2 id="styling-sheet">// STYLING SHEET</h2>
  <pre><code>.show_side_bar {
    position: fixed;
    background-color: brown;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    animation: showMenu 2s;
  }
  
  .close_side_bar {
    animation: showMenu 2s reverse;
  }
  
  @keyframes showMenu {
    from {
      left: -100%;
    }
    to {
      left: 0%;
    }
  }
  </code></pre>