storybook/docs/components/Docs/Nav/index.js

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import './style.css';

const Nav = ({ sections, selectedSectionId, selectedItemId }) => (
  <div id="nav">
    {sections.map(section => (
      <div key={section.id}>
        <h3>{section.heading}</h3>
        <ul>
          {section.items.map(item => {
            const cssClass =
              section.id === selectedSectionId && item.id === selectedItemId ? 'selected' : '';

            const url = `/${section.id}/${item.id}/`;

            return (
              <li key={item.id}>
                <Link className={cssClass} to={url}>
                  {item.title}
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
    ))}
  </div>
);
Nav.propTypes = {
  sections: PropTypes.array, // eslint-disable-line
  selectedSectionId: PropTypes.string.isRequired,
  selectedItemId: PropTypes.string.isRequired,
};

export { Nav as default };