How do I use hamburger-react-menu just on mobile or small screen?

I would like to have a mobile menu in my component, however, it should work only on mobile devices. After clicking on it options like Home, Furniture Chair... should appear. I have my hamburger-react-menu installed, but not sure how to go about this. Should I use media queries or purely react.js? The component code is below. Any tips will be greatly appreciated.

import React from 'react';
import PropTypes from 'prop-types';

import ProductSearch from '../../features/ProductSearch/ProductSearchContainer';

import styles from './MenuBar.module.scss';

const MenuBar = ({ children }) => (
  <div className={styles.root}>
    <div className='container'>
      <div className='row align-items-center'>
        <div className='col'>
          <ProductSearch />
        </div>
        <div className={'col-auto ' + styles.menu}>
          <ul>
            <li>
              <a href='#' className={styles.active}>
                Home
              </a>
            </li>
            <li>
              <a href='#'>Furniture</a>
            </li>
            <li>
              <a href='#'>Chair</a>
            </li>
            <li>
              <a href='#'>Table</a>
            </li>
            <li>
              <a href='#'>Sofa</a>
            </li>
            <li>
              <a href='#'>Bedroom</a>
            </li>
            <li>
              <a href='#'>Blog</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
);

MenuBar.propTypes = {
  children: PropTypes.node,
};

export default MenuBar;

Solution

Using bootstrap can ease your pain, but as CanUver mentioned, if oyu want to show specific elements just for specific viewports, then media queries in css are then thing, you are looking for. You just specify since whne you wanna show the menu differently:

e.g.


@media only screen and (max-width: 490px) {
  h1 { color: "pink"; }
}