2

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;
present_perfect
  • 149
  • 1
  • 2
  • 10
  • 1
    in react, you can type media queries in the same way that you use a normal html and css page. It's not a problem. You can use it in React-Bootstrap, which is a ready-made structure. – CanUver Apr 26 '20 at 19:54
  • 1
    You can do it the same way it is done here: https://stackoverflow.com/questions/61320137/hide-a-nav-link-element-when-viewed-from-mobile-reactbootstrap-typescript/61323561#61323561 – wentjun Apr 26 '20 at 20:14
  • Thank you! And can I use it as a separate component? – present_perfect Apr 27 '20 at 13:15

1 Answers1

1

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"; }
}
Z. Bird
  • 50
  • 11