MobileMenu.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { Collapsible } from '@edx/paragon';

const MobileMenu = ({
  mainMenuDropdowns,
}) => (
  <div
    className="ml-4 p-2 bg-light-100 border border-gray-200 small rounded"
    data-testid="mobile-menu"
  >
    <div>
      {mainMenuDropdowns.map(dropdown => {
        const { id, buttonTitle, items } = dropdown;
        return (
          <Collapsible
            className="border-light-100"
            title={buttonTitle}
            key={id}
          >
            <ul className="p-0" style={{ listStyleType: 'none' }}>
              {items.map(item => (
                <li className="mobile-menu-item">
                  {(
                    /^(?:\w+:)?\/\//.test(item.href)
                      ? (
                        <a href={item.href}>
                          {item.title}
                        </a>
                      ) : <NavLink to={item.href}>{item.title}</NavLink>
                  )}
                </li>
              ))}
            </ul>
          </Collapsible>
        );
      })}
    </div>
  </div>
);

MobileMenu.propTypes = {
  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    buttonTitle: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
      href: PropTypes.string,
      title: PropTypes.string,
    })),
  })),
};
MobileMenu.defaultProps = {
  mainMenuDropdowns: [],
};

export default MobileMenu;