Estoy creando mi primer proyecto en React, un sitio web para un restaurante que muestra un menú, y ya he implementado un Nav que cambia a un menú de hamburguesas cuando se ve en un dispositivo móvil, y tengo otro componente de menú que alterna entre diferentes categorías activas para mostrar contenido diferente, pero no pudo descubrir cómo agregar un interruptor de hamburguesa cuando alcanza un tamaño de pantalla más pequeño.

Mi componente conmutador de categoría se ve así:

 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;

El código de cambio de categoría se proporcionó a partir de un tutorial.

Cualquier consejo es apreciado.