Middle Menu Component using Recompose

MiddleMenu.js

import React from 'react';
import PropTypes from 'prop-types';
import AutoAffix from 'react-overlays/lib/AutoAffix';
import { withState } from 'recompose';
import { fonts, colors } from '../../components/common/theme';

const enhance = withState('selected', 'setSelected', null);

const MiddleMenu = enhance(({ menuItems, selected, setSelected }) => {
  const renderMenuItems = () => {
    return Object.entries(menuItems).map(([key, value]) => {
      return (
        <a
          key={key}
          href={`#${value}`}
          style={{
            color: selected === key ? colors.ccvRed : colors.darkGray
          }}
          onClick={() => setSelected(key)}
        >
          {key}
        </a>
      );
    });
  };

  return (
    <div style={{ minHeight: 60 }}>
      <AutoAffix viewportOffsetTop={77} container={this}>
        <div className="menu-container" style={{ zIndex: '99' }}>
          <div className="container">
            <div className="row">
              <div className="col-xs-12">
                <nav className="menu">{renderMenuItems()}</nav>
              </div>
            </div>
          </div>
        </div>
      </AutoAffix>
      <style jsx global>
        {`
          .menu-container {
            min-height: 60px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            white-space: nowrap;
            overflow-x: auto;
          }

          .menu {
            padding-right: 60px;
            width: fit-content;
          }

          .menu > a {
            font-family: ${fonts.heading};
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: none;
            color: ${colors.darkGray};
            padding: 20px;
            display: inline-block;
          }

          .menu > a:first-child {
            padding-left: 0;
          }

          .menu > a:hover {
            color: ${colors.ccvRed};
          }

          @media all and (max-width: 767px) {
            .menu-container {
              min-height: 60px;
            }

            .menu > a {
              padding: 20px 15px;
            }

            .menu > a:first-child {
              padding-left: 0;
            }
          }
        `}
      </style>
    </div>
  );
});

MiddleMenu.propTypes = {
  menuItems: PropTypes.object.isRequired
};

export { MiddleMenu };