title: Use Css modules add conditional transition styling to my side navigation
body: <p>I would like to add some transition styling to my side navigation on my app. I am able to do this using normal classes however in this tutorial they use css modules and i am unsure how to do this using css modules.</p>
  
  <p>I would like my nav to glide in and out, at the moment it jumps statically when the onClick function fires - <code>toggleSideDrawer</code>. </p>
  
  <p>I have used this logic but I am not sure if it is doing anything: </p>
  
  <pre><code>className={props.toggleSideDrawer ? classes.SideDrawerOpen : classes.SideDrawer
  </code></pre>
  
  <p>Essentially i want that when the user clicks the toggle, the <code>transform</code> property switches from <code>translateX(-100%)</code> to <code>translateX(0)</code> but this is not happening.</p>
  
  <p>Side nav code:</p>
  
  <pre><code>import React from "react";
  import Logo from "../../Logo/Logo";
  import NavigationItems from "../NavigationItems/NavigationItems";
  import Backdrop from "../../UI/Backdrop/Backdrop";
  import Aux from "../../../hoc/Aux";
  
  import classes from "./SideDrawer.css";
  
  const SideDrawer = props =&gt; {
    return (
      &lt;Aux classname={classes.SideDrawer}&gt;
        &lt;Backdrop
          showBackdrop={props.showSideDrawer}
          clicked={props.toggleSideDrawer}
        /&gt;
        {props.showSideDrawer &amp;&amp; (
          &lt;div
            onClick={props.toggleSideDrawer}
            className={
              props.toggleSideDrawer ? classes.SideDrawerOpen : classes.SideDrawer
            }
          &gt;
            &lt;div className={classes.Logo}&gt;
              &lt;Logo /&gt;
            &lt;/div&gt;
  
            &lt;nav&gt;
              &lt;NavigationItems /&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
        )}
      &lt;/Aux&gt;
    );
  };
  
  export default SideDrawer;
  </code></pre>
  
  <p>Where the code is used in my Layout component:</p>
  
  <pre><code>import React, { useState } from "react";
  import Aux from "../Aux";
  
  import classes from "./Layout.css";
  import Toolbar from "../../components/Navigation/Toolbar/Toolbar";
  import SideDrawer from "../../components/Navigation/SideDrawer/SideDrawer";
  
  const layout = props =&gt; {
    const [showSideDrawer, setShowSideDrawer] = useState(false);
  
    return (
      &lt;Aux&gt;
        &lt;SideDrawer
          showSideDrawer={showSideDrawer}
          toggleSideDrawer={() =&gt; {
            setShowSideDrawer(!showSideDrawer);
          }}
        /&gt;
        &lt;Toolbar
          onMenuClick={() =&gt; {
            setShowSideDrawer(!showSideDrawer);
          }}
        /&gt;
        &lt;main className={classes.mainContent}&gt; {props.children} &lt;/main&gt;
      &lt;/Aux&gt;
    );
  };
  export default layout;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.SideDrawer {
    position: fixed;
    width: 280px;
    max-width: 70%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 200;
    background-color: white;
    padding: 32px 16px;
    box-sizing: border-box;
    transform: translateX(-100%);
  }
  @media (min-width: 500px) {
    .SideDrawer {
      display: none;
    }
  }
  
  .Logo {
    height: 11%;
    text-align: center;
  }
  .SideDrawerOpen {
    position: fixed;
    width: 280px;
    max-width: 70%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 200;
    padding: 32px 16px;
    box-sizing: border-box;
    background-color: red;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
  }
  
  </code></pre>