title: how to add custom active class to sidebar menu of dashboard in next js?
body: <p>I have created a sidebar component as <code>sidebar.js</code> in which there is a list of sidebar menu</p>
  <pre><code>&lt;ul&gt;
       &lt;Link href='/Home' passHref&gt;
        &lt;li className=`${styles.listitem} ${styles.active}`&gt;Home&lt;/li&gt;
       &lt;/Link&gt;
       &lt;Link href='/Profile' passHref&gt;
        &lt;li className=`${styles.listitem}`&gt;Profile&lt;/li&gt;
       &lt;/Link&gt;
       &lt;Link href='/About' passHref&gt;
        &lt;li className=`${styles.listitem}`&gt;About&lt;/li&gt;
       &lt;/Link&gt;
       &lt;Link href='/Blogs' passHref&gt;
        &lt;li className=`${styles.listitem}`&gt;Blogs&lt;/li&gt;
       &lt;/Link&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>and to style this component I have created <code>sidebar.modules.css</code> file in which there is an active class styling as</p>
  <pre><code>.active {
  background: #0077bb;
  }
  </code></pre>
  <p>but I don't want it like this, I want to add an active class to it when I call this component from the parent screen while passing an active class as a prop like this</p>
  <pre><code>const Home = () =&gt;{
  returns(
  &lt;sidebar homeActive = 'active' /&gt;
  )
  }
  </code></pre>
  <p>like this for all the pages how can I do that</p>