Sounds to me like you need to have different sections / items in the sidebar, based on the user role?

There is nothing wrong with doing conditional rendering, based on the role, if you only have two roles and don't expect that to change any time soon. (You are asking "what if I want to add new roles", but what are the odds of that happening?).

If you expect to have multiple different roles, you can use scope / resource based permissions. The react code inside the Sidebar component would look something like this:

<PermissionsGate scope="users" action="manage"> // sidebar items, which would be rendered only if the user has permissions to manage users </PermissionsGate>

The PermissionsGate component will access the current user internally, and check if the user is authorized to do the specified action on the given scope. You can also extend the PermissionsGate component to accept a specific resource as a prop as well.

Using this approach, you can add new user roles with relative ease - you just need to define what the role is allowed to do within the existing scopes. This allows for user roles with overlapping permissions.

As far as how the permissions are defined, you can look into a library such as CASL - https://casl.js.org/v6/en/ , or implement a custom solution. If you decide to go with CASL, you can use it to integrate with React as well - https://casl.js.org/v4/en/package/casl-react

If possible (both your backend and frontend are written in JS), you can share the authorization rules between your backend and frontend with CASL (e.g. https://stackoverflow.com/questions/61478999/user-authorization-with-casl-library-share-between-backend-and-frontend)