title: Best way to change className in Next.js when a button is clicked, with CSS Modules?
body: <p>I am creating a basic nav bar and I want to change it based on screen size. Once it hits 600px i'd like to hide the links and display a clickable nav button that will expand those options.</p>
  <p>After console logging my list Elements I found that the className was given this 'Nav_floatLeft__H1YZ8'. So based on that finding, my code is as follows. However, my navigation does not display any changes when clicking the button.</p>
  <p>I'm sure React has a better way of handling this situation, but I'm fairly new to it. Should I be using some kind of state/effect hook?</p>
  <p>Nav:</p>
  <pre><code>const openCloseMenu = () =&gt; {
      console.log(document.getElementsByClassName(styles.floatLeft).className);
      let elements = document.getElementsByClassName(styles.floatLeft);
  
      if (elements.className === &quot;Nav_floatLeft__H1YZ8&quot;){
          alert(&quot;Changed to: Menu Bar Expanded&quot;);
          elements.className = styles.menuBarExpanded;
      }
      else {
          alert(&quot;Changed Back to: Float Left&quot;)
          elements.className = styles.floatLeft;
      }
  }
  
  return (
      &lt;div className={styles.topNav}&gt;
          
          &lt;nav&gt;
              &lt;ul className={styles.inlineListItem}&gt;
              
                  &lt;li className={styles.floatLeft}&gt;
                      &lt;Link href=&quot;/&quot;&gt;
                          &lt;a&gt;Home&lt;/a&gt;
                      &lt;/Link&gt;
                  &lt;/li&gt;
  
                  &lt;li className={styles.floatLeft}&gt;
                      &lt;Link href=&quot;/search&quot;&gt;
                          &lt;a&gt;Search&lt;/a&gt;
                      &lt;/Link&gt;
                  &lt;/li&gt;
  
                  &lt;li className={styles.menuBar}&gt;
                      &lt;button onClick={openCloseMenu}&gt;Expand Nav&lt;/button&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
              
          &lt;/nav&gt;
      &lt;/div&gt;
  )
  </code></pre>
  <p>CSS:</p>
  <pre><code>.inlineListItem{
      display: inline;
      list-style: none;
  }
  
  .floatLeft{
      float: left;
      margin: 1rem;
      padding-left: 1rem;
      text-align: center;
      color: white;
  }
  
  .floatRight{
      display: inline;
      float: right;
      color: white;
      margin: 1rem;
      padding-right: 2rem;
  }
  
  .menuBar{
      display: none;
      float: left;
      margin: 1rem;
      padding-left: 1rem;
      text-align: center;
      color: white;
  }
  
  .menuBarExpanded{
      display: block;
  }
  
  @media screen and (max-width: 600px) {
      .menuBar{
          display: block;
      }
      .floatLeft{
          display: none;
      }
      .floatRight{
          display: none;
      }
  }
  </code></pre>