title: How can I show a different sidebar based on user information? After logged in. ReactJS
body: <p>I have a react js application which authenticates with azure active directory and then it shows this menu:</p>
  
  <p><a href="https://i.stack.imgur.com/meC6A.png" rel="noreferrer"><img src="https://i.stack.imgur.com/meC6A.png" alt="enter image description here"></a></p>
  
  <p>However I want that after logged in, based on information received from Azure AD Like Roles Or groups, then a different side bar with different options is shown, so I can have the same APP with different groups of users and the menu will depend on the role or group.</p>
  
  <p>This is my app structure:</p>
  
  <p><a href="https://i.stack.imgur.com/7kZWp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7kZWp.png" alt="enter image description here"></a></p>
  
  <p>And here is the relevant files:</p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import DashApp from './dashApp';
  import registerServiceWorker from './registerServiceWorker';
  import 'antd/dist/antd.css';
  import { runWithAdal } from 'react-adal';
  import { authContext } from './adalConfig';
  
  const DO_NOT_LOGIN = false;
  runWithAdal(authContext, () =&gt; {
    ReactDOM.render(&lt;DashApp /&gt;, document.getElementById('root'));
    // Hot Module Replacement API
    if (module.hot) {
      module.hot.accept('./dashApp.js', () =&gt; {
        const NextApp = require('./dashApp').default;
        ReactDOM.render(&lt;NextApp /&gt;, document.getElementById('root'));
      });
    }
  
  },DO_NOT_LOGIN);
  
  registerServiceWorker();
  </code></pre>
  
  <p>Sidebebar.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import clone from "clone";
  import { Link } from "react-router-dom";
  import { Layout } from "antd";
  import options from "./options";
  import Scrollbars from "../../components/utility/customScrollBar.js";
  import Menu from "../../components/uielements/menu";
  import IntlMessages from "../../components/utility/intlMessages";
  import SidebarWrapper from "./sidebar.style";
  import appActions from "../../redux/app/actions";
  import Logo from "../../components/utility/logo";
  import themes from "../../settings/themes";
  import { themeConfig } from "../../settings";
  
  const SubMenu = Menu.SubMenu;
  const { Sider } = Layout;
  
  const {
    toggleOpenDrawer,
    changeOpenKeys,
    changeCurrent,
    toggleCollapsed
  } = appActions;
  const stripTrailingSlash = str =&gt; {
    if (str.substr(-1) === "/") {
      return str.substr(0, str.length - 1);
    }
    return str;
  };
  
  class Sidebar extends Component {
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
      this.onOpenChange = this.onOpenChange.bind(this);
    }
    handleClick(e) {
      this.props.changeCurrent([e.key]);
      if (this.props.app.view === "MobileView") {
        setTimeout(() =&gt; {
          this.props.toggleCollapsed();
          this.props.toggleOpenDrawer();
        }, 100);
      }
    }
    onOpenChange(newOpenKeys) {
      const { app, changeOpenKeys } = this.props;
      const latestOpenKey = newOpenKeys.find(
        key =&gt; !(app.openKeys.indexOf(key) &gt; -1)
      );
      const latestCloseKey = app.openKeys.find(
        key =&gt; !(newOpenKeys.indexOf(key) &gt; -1)
      );
      let nextOpenKeys = [];
      if (latestOpenKey) {
        nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
      }
      if (latestCloseKey) {
        nextOpenKeys = this.getAncestorKeys(latestCloseKey);
      }
      changeOpenKeys(nextOpenKeys);
    }
    getAncestorKeys = key =&gt; {
      const map = {
        sub3: ["sub2"]
      };
      return map[key] || [];
    };
    getMenuItem = ({ singleOption, submenuStyle, submenuColor }) =&gt; {
      const { key, label, leftIcon, children } = singleOption;
      const url = stripTrailingSlash(this.props.url);
      if (children) {
        return (
          &lt;SubMenu
            key={key}
            title={
              &lt;span className="isoMenuHolder" style={submenuColor}&gt;
                &lt;i className={leftIcon} /&gt;
                &lt;span className="nav-text"&gt;
                  &lt;IntlMessages id={label} /&gt;
                &lt;/span&gt;
              &lt;/span&gt;
            }
          &gt;
            {children.map(child =&gt; {
              const linkTo = child.withoutDashboard
                ? `/${child.key}`
                : `${url}/${child.key}`;
              return (
                &lt;Menu.Item style={submenuStyle} key={child.key}&gt;
                  &lt;Link style={submenuColor} to={linkTo}&gt;
                    &lt;IntlMessages id={child.label} /&gt;
                  &lt;/Link&gt;
                &lt;/Menu.Item&gt;
              );
            })}
          &lt;/SubMenu&gt;
        );
      }
      return (
        &lt;Menu.Item key={key}&gt;
          &lt;Link to={`${url}/${key}`}&gt;
            &lt;span className="isoMenuHolder" style={submenuColor}&gt;
              &lt;i className={leftIcon} /&gt;
              &lt;span className="nav-text"&gt;
                &lt;IntlMessages id={label} /&gt;
              &lt;/span&gt;
            &lt;/span&gt;
          &lt;/Link&gt;
        &lt;/Menu.Item&gt;
      );
    };
    render() {
      const { app, toggleOpenDrawer, height } = this.props;
      const collapsed = clone(app.collapsed) &amp;&amp; !clone(app.openDrawer);
      const { openDrawer } = app;
      const mode = collapsed === true ? "vertical" : "inline";
      const onMouseEnter = event =&gt; {
        if (openDrawer === false) {
          toggleOpenDrawer();
        }
        return;
      };
      const onMouseLeave = () =&gt; {
        if (openDrawer === true) {
          toggleOpenDrawer();
        }
        return;
      };
      const customizedTheme = themes[themeConfig.theme];
      const styling = {
        backgroundColor: customizedTheme.backgroundColor
      };
      const submenuStyle = {
        backgroundColor: "rgba(0,0,0,0.3)",
        color: customizedTheme.textColor
      };
      const submenuColor = {
        color: customizedTheme.textColor
      };
      return (
        &lt;SidebarWrapper&gt;
          &lt;Sider
            trigger={null}
            collapsible={true}
            collapsed={collapsed}
            width="240"
            className="isomorphicSidebar"
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
            style={styling}
          &gt;
            &lt;Logo collapsed={collapsed} /&gt;
            &lt;Scrollbars style={{ height: height - 70 }}&gt;
              &lt;Menu
                onClick={this.handleClick}
                theme="dark"
                className="isoDashboardMenu"
                mode={mode}
                openKeys={collapsed ? [] : app.openKeys}
                selectedKeys={app.current}
                onOpenChange={this.onOpenChange}
              &gt;
                {options.map(singleOption =&gt;
                  this.getMenuItem({ submenuStyle, submenuColor, singleOption })
                )}
              &lt;/Menu&gt;
            &lt;/Scrollbars&gt;
          &lt;/Sider&gt;
        &lt;/SidebarWrapper&gt;
      );
    }
  }
  
  export default connect(
    state =&gt; ({
      app: state.App.toJS(),
      height: state.App.toJS().height
    }),
    { toggleOpenDrawer, changeOpenKeys, changeCurrent, toggleCollapsed }
  )(Sidebar);
  </code></pre>
  
  <p>dashapp.js</p>
  
  <pre><code>import React from "react";
  import { Provider } from "react-redux";
  import { store, history } from "./redux/store";
  import PublicRoutes from "./router";
  import { ThemeProvider } from "styled-components";
  import { LocaleProvider } from "antd";
  import { IntlProvider } from "react-intl";
  import themes from "./settings/themes";
  import AppLocale from "./languageProvider";
  import config, {
    getCurrentLanguage
  } from "./containers/LanguageSwitcher/config";
  import { themeConfig } from "./settings";
  import DashAppHolder from "./dashAppStyle";
  import Boot from "./redux/boot";
  
  const currentAppLocale =
    AppLocale[getCurrentLanguage(config.defaultLanguage || "english").locale];
  
  
  const DashApp = () =&gt; (
    &lt;LocaleProvider locale={currentAppLocale.antd}&gt;
      &lt;IntlProvider
        locale={currentAppLocale.locale}
        messages={currentAppLocale.messages}
      &gt;
        &lt;ThemeProvider theme={themes[themeConfig.theme]}&gt;
          &lt;DashAppHolder&gt;
            &lt;Provider store={store}&gt;
              &lt;PublicRoutes history={history} /&gt;
            &lt;/Provider&gt;
          &lt;/DashAppHolder&gt;
        &lt;/ThemeProvider&gt;
      &lt;/IntlProvider&gt;
    &lt;/LocaleProvider&gt;
  );
  Boot()
    .then(() =&gt; DashApp())
    .catch(error =&gt; console.error(error));
  
  export default DashApp;
  export { AppLocale };
  </code></pre>
  
  <p>Question:</p>
  
  <p>How do I modify this code to render a different sidebar depending on the logged in user?</p>