I am building my first project in React, a website for a restaurant that displays a menu, and have already implemented a Nav that toggles to a hamburger menu when viewed on mobile, and I have another menu component that toggles between different active categories to display different content, but could not figure out how to add a hamburger toggler when reaching a smaller screen size.

My category switcher component looks like this:

import React from "react";

const Categories = ({ categories, filterItems, activeCategory }) => {
  return (
    <div className="btn-container">
      {categories.map((category, index) => {
        return (
          <button
            type="button"
            className={`${
              activeCategory === category ? "filter-btn active" : "filter-btn"
            }`}
            key={index}
            onClick={() => filterItems(category)}
          >
            {category}
          </button>
        );
      })}
    </div>
  );
};

export default Categories;

Category switcher code was provided from a tutorial.

Any advice is appreciated.