title: How can I render sidebar depend on user
body: <p>I have 5 types of users and all users access sidebar depending on which users are they.
  I shared with you the user details in the screenshot. you can check walletClasList, and also issuerAccess, userAccess, macAccess, nodeAccess.</p>
  <p>If you have any query or questions so you can contact me on my stack overflow account or insta <em><strong>dhansukh_katariya</strong></em></p>
  <pre><code>import { Link } from 'react-router-dom';
  import { webwalletnavbar } from '../Constatnts/Sidebaritems';
  import { useEffect, useState } from 'react';
  import http from '../api/httpService';
  
  function Sidebar() {
    let pathname = window.location.pathname;
    const [menu, setMenu] = useState([]);
    // const [userSidebar, setUserSidebar] = useState();
    
    useEffect(() =&gt; {
      async function fetchData() {
        let response = await http.get('api/security/GetNavigation');
        setMenu(response.data);
      }
      fetchData();
    }, []);
    let dynamicClassId = '';
    console.log(menu);
  
    return (
      &lt;&gt;
        {/* &lt;div className=&quot;container-fluid p-0&quot;&gt; */}
        {/* &lt;div className=&quot;row m-0&quot;&gt; */}
        {/* &lt;div className=&quot;col-md-3 col-lg-3 col-xxl-2 p-0&quot;&gt; */}
        &lt;div className='sidebar'&gt;
          {menu &amp;&amp;
            menu.map((menu, index) =&gt; {
              // let id=menu.itemLevel===1&amp;&amp;menu.keycode;
              if (menu.itemLevel === 1) {
                dynamicClassId =
                  menu.displayname.replace(/ /g, '') + menu.navbarID;
              }
              return (
                &lt;div className='accordion sidebar-main' key={index} id='sd'&gt;
                  &lt;div
                    // className=&quot;issuers&quot;
                    className={
                      menu.walletClassList === 'NODE,MA,ISSUER,USER'
                        ? 'issuers d-block'
                        : 'issuers d-none'
                    }
                  &gt;
                    {menu.itemLevel === 1 &amp;&amp; (
                      &lt;h2
                        // className=&quot;accordion-header active&quot;
                        className={
                          webwalletnavbar.includes(pathname)
                            ? 'accordion-header active'
                            : 'accordion-header'
                        }
                        // {
                        // Issuer.includes(pathname)
                        // ? &quot;accordion-header active&quot;
                        // : &quot;accordion-header&quot;
                        // }
                        id={menu.keycode}
                      &gt;
                        &lt;button
                          className='accordion-button'
                          type='button'
                          data-bs-toggle='collapse'
                          data-bs-target={'#' + dynamicClassId}
                        &gt;
                          &lt;div className='sidebar-main-label d-flex align-items-center '&gt;
                            {webwalletnavbar.includes(pathname) ? (
                              &lt;img
                                src='../icons/Issuers-icon-active.png'
                                className='issuers-icon-img show'
                                alt='Issuers-icon-img'
                              &gt;&lt;/img&gt;
                            ) : (
                              &lt;img
                                src='../icons/Issuers-icon.png'
                                className='issuers-icon-img none'
                                alt='issuers-icon-img'
                              &gt;&lt;/img&gt;
                            )}
                            &lt;h3&gt;{menu.displayname}&lt;/h3&gt;
                          &lt;/div&gt;
                        &lt;/button&gt;
                      &lt;/h2&gt;
                    )}
                    {menu.itemLevel === 2 &amp;&amp; (
                      &lt;div
                        id={dynamicClassId}
                        // className={
                        //   menu.walletClassList === &quot;NODE,MA,0,0&quot; &amp;&amp;
                        //   menu.itemLevel === 2
                        //     ? &quot;accordion-collapse collapse show d-block&quot;
                        //     : &quot;accordion-collapse collapse show d-none&quot;
                        // }
                        className={
                          webwalletnavbar.includes(pathname)
                            ? 'accordion-collapse collapse '
                            : 'accordion-collapse collapse show'
                        }
                        aria-labelledby='issuers'
                        data-bs-parent='#sd'
                      &gt;
                        &lt;ul&gt;
                          &lt;li&gt;
                            &lt;Link
                              to={{
                                pathname: '/webwallet/model2',
                                // query: { backUrl: &quot;/webwallet/createissuer&quot; },
                                search: `?backUrl=${menu.webURL}`,
                              }}
                              className={
                                pathname === menu.webURL ? ' active' : ''
                              }
                            &gt;
                              {menu.displayname}
                            &lt;/Link&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                    )}
                  &lt;/div&gt;
                &lt;/div&gt;
              );
            })}
        &lt;/div&gt;
        {/* &lt;/div&gt; */}
        {/* &lt;/div&gt; */}
        {/* &lt;/div&gt; */}
      &lt;/&gt;
    );
  }
  
  export default Sidebar;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/lkHlN.png" rel="nofollow noreferrer">this is a image of data base, as you can see user data.</a></p>
  <p><a href="https://i.stack.imgur.com/brM89.png" rel="nofollow noreferrer">enter image description here</a></p>