contiago-toolbar/app/components/ToolbarNavbar/index.js

One of the options for outputting content from contiago xml-server

import React from 'react';
import PropTypes from 'prop-types';
import Container from './Container';
import Item from './Item';

class Navbar extends React.Component {
  render() {
    const { push, toolbarConfig, location } = this.props;
    const tabsArray =
      toolbarConfig &&
      toolbarConfig.outputRubricList &&
      toolbarConfig.outputRubricList.length
        ? toolbarConfig.outputRubricList
        : [];
    tabsArray.sort(
      (category1, category2) => category1.rubricOrder - category2.rubricOrder
    );
    const sortedTabsArray = [...tabsArray];
    return (
      <Container>
        <Item active={location === 'Home'} onClick={() => push('Home')}>
          Home
        </Item>
        {sortedTabsArray.length
          ? sortedTabsArray.map((element) => (
            <Item
              key={element.rubricOrder}
              active={location === `Rubric/${element.id}`}
              onClick={() => push(`Rubric/${element.id}`)}
            >
              {element.rubricTitle}
            </Item>
            ))
          : null}
      </Container>
    );
  }
}

Navbar.propTypes = {
  push: PropTypes.func,
  toolbarConfig: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
  location: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool,
  ]),
};

export default Navbar;