index.js

class AgentDashboard extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      roles: [],
      joyrideOverlay: true,
      joyrideType: "continuous",
      isReady: false,
      isRunning: false,
      stepIndex: 0,
      steps: [],
      selector: ""
    };
  }
  componentDidMount() {
  this.setState({
      isReady: true,
      isRunning: true,
    });
  }


  addSteps(steps) {
    let newSteps = steps;
    if (!Array.isArray(newSteps)) {
      newSteps = [newSteps];
    }

    if (!newSteps.length) {
      return;
    }

    this.setState(currentState => {
      currentState.steps = currentState.steps.concat(newSteps);
      return currentState;
    });
  }

  callback(data) {
    this.setState({
      selector: data.type === "tooltip:before" ? data.step.selector : ""
    });
  }

  next() {
    this.joyride.next();
  }

  render() {
    const {
      isReady,
      isRunning,
      joyrideOverlay,
      joyrideType,
      selector,
      stepIndex,
      steps
    } = this.state;
    let html;
    if (isReady) {
      html = (
        <div>
          <Joyride
            ref={c => (this.joyride = c)}
            callback={data => this.callback(data)}
            debug={false}
            disableOverlay={selector === ".card-tickets"}
            locale={{
              back: <span>Back</span>,
              close: <span>Close</span>,
              last: <span>Last</span>,
              next: <span>Next</span>,
              skip: <span>Skip</span>
            }}
            run={isRunning}
            showOverlay={joyrideOverlay}
            showSkipButton={true}
            showStepsProgress={true}
            stepIndex={stepIndex}
            steps={steps}
            type={joyrideType}
          />
          <TopNavigation
            username={this.state.username ? this.state.username : ""}
            }
            roles={this.state.roles}
          />
          <main className="imp">
            <SideNavigation
              currentNav={this.props.location.pathname.substring(1)}
              addSteps={steps => this.addSteps(steps)}
              selector={selector}
              next={() => this.next()}
            />
          </main>
        </div>
      );
    }
    return (
      <div>
        {html}
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AgentDashboard);

navigation.js

const sideMenus = [
  {
    menu: "My Property",
    link: "imp/dashboard/my-properties",
    icon: "icon-hotel",
    class: "hotel-selector"
  },
  {
    menu: "My IMP",
    link: "imp/dashboard/my-imps",
    icon: "icon-people-outline",
    class: "imp-selector"
  },
];

class SideNavigation extends React.PureComponent {
  componentDidMount() {
    const steps = [
      {
        title: "Trigger Action",
        text: "It can be click",
        selector: ".imp-dashboard",
        position: "right",
        type: "hover",
      },
      {
        title: "Advance customization",
        text:
          "You can set individual styling options for beacons and tooltips.",
        selector: ".hotel-selector",
        position: "bottom",
        allowClicksThruHole: true,
        style: {
          backgroundColor: "#ccc",
          mainColor: "#000",
          header: {
            color: "#f04",
            fontSize: "3rem",
            textAlign: "center"
          },
          footer: {
            display: "none"
          },
          beacon: {
            inner: "#000",
            outer: "#000"
          }
        }
      }
    ];
    this.props.addSteps(steps);
  }

  handleClick = e => {
    e.preventDefault();
    const { next } = this.props;
    next();
  };

  render() {
    const { currentNav, selector } = this.props;
    const menuToShow = sideMenus.map(menuItem =>
      <Menu.Item key={menuItem.link} className={menuItem.class}>
        <NavLink
          activeClassName={currentNav.includes(menuItem.link) ? "active" : ""}
          to={`/${menuItem.link}`}
        >
          <i className={menuItem.icon} />
          <span>
            {menuItem.menu}
          </span>
        </NavLink>
      </Menu.Item>
    );
    return (
      <Sidebar.Pushable>
        <Sidebar
          as={Menu}
          width="thin"
          visible
          icon="labeled"
          vertical
          inverted
        >
          <Menu.Item name="dashboard" className="imp-dashboard">
            <NavLink
              activeClassName={currentNav === "imp/dashboard" ? "active" : ""}
              to="/imp/dashboard"
            >
              <i className="icon-activity" />
              <span>Dashboard</span>
            </NavLink>
          </Menu.Item>
          {menuToShow}
        </Sidebar>
        <Sidebar.Pusher>
          <Routes />
        </Sidebar.Pusher>
      </Sidebar.Pushable>
    );
  }
}