如何根据用户呈现侧边栏

Question

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.

If you have any query or questions so you can contact me on my stack overflow account or insta dhansukh_katariya

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(() => {
    async function fetchData() {
      let response = await http.get('api/security/GetNavigation');
      setMenu(response.data);
    }
    fetchData();
  }, []);
  let dynamicClassId = '';
  console.log(menu);

  return (
    <>
      {/* <div className="container-fluid p-0"> */}
      {/* <div className="row m-0"> */}
      {/* <div className="col-md-3 col-lg-3 col-xxl-2 p-0"> */}
      <div className='sidebar'>
        {menu &&
          menu.map((menu, index) => {
            // let id=menu.itemLevel===1&&menu.keycode;
            if (menu.itemLevel === 1) {
              dynamicClassId =
                menu.displayname.replace(/ /g, '') + menu.navbarID;
            }
            return (
              <div className='accordion sidebar-main' key={index} id='sd'>
                <div
                  // className="issuers"
                  className={
                    menu.walletClassList === 'NODE,MA,ISSUER,USER'
                      ? 'issuers d-block'
                      : 'issuers d-none'
                  }
                >
                  {menu.itemLevel === 1 && (
                    <h2
                      // className="accordion-header active"
                      className={
                        webwalletnavbar.includes(pathname)
                          ? 'accordion-header active'
                          : 'accordion-header'
                      }
                      // {
                      // Issuer.includes(pathname)
                      // ? "accordion-header active"
                      // : "accordion-header"
                      // }
                      id={menu.keycode}
                    >
                      <button
                        className='accordion-button'
                        type='button'
                        data-bs-toggle='collapse'
                        data-bs-target={'#' + dynamicClassId}
                      >
                        <div className='sidebar-main-label d-flex align-items-center '>
                          {webwalletnavbar.includes(pathname) ? (
                            <img
                              src='../icons/Issuers-icon-active.png'
                              className='issuers-icon-img show'
                              alt='Issuers-icon-img'
                            ></img>
                          ) : (
                            <img
                              src='../icons/Issuers-icon.png'
                              className='issuers-icon-img none'
                              alt='issuers-icon-img'
                            ></img>
                          )}
                          <h3>{menu.displayname}</h3>
                        </div>
                      </button>
                    </h2>
                  )}
                  {menu.itemLevel === 2 && (
                    <div
                      id={dynamicClassId}
                      // className={
                      //   menu.walletClassList === "NODE,MA,0,0" &&
                      //   menu.itemLevel === 2
                      //     ? "accordion-collapse collapse show d-block"
                      //     : "accordion-collapse collapse show d-none"
                      // }
                      className={
                        webwalletnavbar.includes(pathname)
                          ? 'accordion-collapse collapse '
                          : 'accordion-collapse collapse show'
                      }
                      aria-labelledby='issuers'
                      data-bs-parent='#sd'
                    >
                      <ul>
                        <li>
                          <Link
                            to={{
                              pathname: '/webwallet/model2',
                              // query: { backUrl: "/webwallet/createissuer" },
                              search: `?backUrl=${menu.webURL}`,
                            }}
                            className={
                              pathname === menu.webURL ? ' active' : ''
                            }
                          >
                            {menu.displayname}
                          </Link>
                        </li>
                      </ul>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
      </div>
      {/* </div> */}
      {/* </div> */}
      {/* </div> */}
    </>
  );
}

export default Sidebar;

this is a image of data base, as you can see user data.

enter image description here

Answer 1

You should divide all menus in to different components. and then render those conditionally.

Like for whole sidebar create a Component <SideBar></SideBar> then for each menu create components <wallet></wallet> <issuer></issuer> etc

Then if user has_access to wallet render it similarly others.

Code should look like:

<SideBar>
  {
     user.type === "walletClasList" ?
     </wallet>
     : user.type === "issuer" ? </issuer> : <so-on>
  }
</SideBar>

Now you just call Sidebar wherever you need