title: overlay navbar with transition in React
body: <p>I'm having issues with an overlay navbar which is supposed to slide in from top.</p>
  <p>Not sure why, but if i click the hamburger menu, the proper css class is applied, but the transition doesn't occur (it acts like a show/hidden).
  However, if i change the top property value from the dev tool, it works as expected.</p>
  <p>what am i missing?</p>
  <p>Here's the react component</p>
  <pre><code>
  import React, { useState } from &quot;react&quot;;
  import NavMenuIcon from &quot;../../public/svg/nav.svg&quot;;
  import styles from '../../styles/Navbar.module.scss'
  import Link from 'next/link'
  
  function Navbar() {
      const [menu, setToggle] = useState(false);
      const toggleMenu = () =&gt; setToggle(!menu);
  
      const Menu = props =&gt; (
          &lt;div className={ props.toggle ? `${styles.menu__container} ${styles.toggle}` : `${styles.menu__container}` }&gt;
            &lt;div className={styles.menu__content}&gt;
              &lt;ul className={styles.menu__list}&gt;
                &lt;li className={styles.menu__item} onClick={toggleMenu}&gt; &lt;Link href=&quot;/&quot;&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/Link&gt;&lt;/li&gt;
                &lt;li className={styles.menu__item} onClick={toggleMenu}&gt; &lt;Link href=&quot;/services&quot;&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/Link&gt;&lt;/li&gt;
                &lt;li className={styles.menu__item} onClick={toggleMenu}&gt; &lt;Link href=&quot;/services#contact&quot;&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      );
  
      return (
        &lt;div className={styles.navbar}&gt;
          &lt;i&gt;Meuartelie&lt;/i&gt;
          &lt;NavMenuIcon className={styles.hamburger} onClick={toggleMenu} /&gt;
          &lt;Menu toggle={menu}&gt;&lt;/Menu&gt;
        &lt;/div&gt;
      );
  }
  
  export default Navbar;
  
  </code></pre>
  <p>and here's the css</p>
  <pre><code>@import './variables.scss';
  
  .navbar {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5%;
    z-index: 5;
  }
  
  .menu__container {
    font-family: 'Jokerman Std';
    position: absolute;
    top: -300px;
    left: 0;
    width: 100vw;
    height: 300px;
    z-index: -1;
    background-image:  url(&quot;../public/png/welcome_mobile.png&quot;);
    background-color: black;
    background-size: cover;
    overflow: hidden;
    transition: 850ms;
  }
  
  .menu__content {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20%;
  }
  
  .menu__container.toggle {
    top: 0;
    transition: all 1s ease-in;
  }
  
  .menu__list {
    width: 80%;
    text-align: center;
    list-style: none;
    padding: 0px;
    line-height: 2;
    margin: 0px;
    margin-bottom: 20px;
  }
  
  .menu__item {
    transition: padding-left .7s ease, color .7s ease;
    /* underline css*/
    text-decoration: none; 
    position: relative; 
  }
  
  .menu__item:hover {
    color: $base-color;
    padding-left: 20px;
    cursor: pointer;
  }
  
  
  .menu__item:after {
    content: '';
    height: 2px;
    /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
    bottom: 0px; 
    /* center - (optional) use with adjusting width   */
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 40%;
    background: #fff;
    /* optional animation */
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
  }
       
  
  /* optional hover classes used with anmiation */
  .menu__item:hover:after {
    background: $base-color;
  }
  
  .hamburger {
    z-index: 1000;
    cursor: pointer;
  }
  
  </code></pre>