Reports

En react los componentes select y option son nativos, no se les puede dar la personalización que se le quisiera dar, pero es posible atreves de muchas alternativas, por ejemplo a mi se me ocurrió: switch case para manejar el estado isClose, setIsClose, así seteamos los datos y hacemos que aparzma nuestro menu cuando queramos
aqui es en html pero seria algo similar, lo e sacado de un proyecto de mi escuela, espero te sirva
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Menú JS Puro</title>
</head>
<body>
    <div id="root"></div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
    
    function crearMenuConJavaScriptPuro() {
        let seccionActiva = 'inicio';
        let isClose = true;

        const actualizarContenido = (contenidoElemento, botones) => {
            
            switch (seccionActiva) {
                case 'inicio':
                    contenidoElemento.innerHTML = '<h3>Página Principal</h3><p>Haz clic en el botón para desplegar las opciones.</p>';
                    break;
                case 'productos':
                    contenidoElemento.innerHTML = '<h3>Nuestros Productos</h3><ul><li>Laptop Pro - $1200</li><li>Monitor Ultra HD - $350</li></ul>';
                    break;
                case 'contacto':
                    contenidoElemento.innerHTML = '<h3>Contáctanos</h3><p>[email protected]</p>';
                    break;
            }

            botones.forEach(btn => {
                btn.style.backgroundColor = 'white';
                btn.style.color = '#007bff';
                btn.style.fontWeight = 'normal';

                if (btn.dataset.seccion === seccionActiva) {
                    btn.style.backgroundColor = '#007bff';
                    btn.style.color = 'white';
                    btn.style.fontWeight = 'bold';
                }
            });
        };

        const toggleMenu = (navLinksElemento, toggleBtnElemento) => {
            isClose = !isClose;

            navLinksElemento.style.display = isClose ? 'none' : 'flex';
            toggleBtnElemento.textContent = isClose ? 'Abrir' : 'Cerrar';
        };

        const estilos = {
            contenedor: {
                fontFamily: 'Arial, sans-serif',
                maxWidth: '600px',
                margin: '20px auto',
                border: '1px solid #ccc',
                padding: '15px',
                borderRadius: '8px',
            },
            navBar: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                paddingBottom: '10px',
            },
            navLinks: {
                display: 'none',
                flexDirection: 'column',
                gap: '5px',
                marginTop: '10px',
                paddingTop: '10px',
                borderTop: '1px solid #eee',
            },
            toggleButton: {
                padding: '10px 15px',
                border: '1px solid #333',
                backgroundColor: '#f0f0f0',
                cursor: 'pointer',
                borderRadius: '4px',
                fontWeight: 'bold',
            },
            botonBase: {
                padding: '10px 15px',
                border: '1px solid #007bff',
                backgroundColor: '#fff',
                color: '#007bff',
                cursor: 'pointer',
                borderRadius: '4px',
                transition: 'background-color 0.3s, color 0.3s',
                textAlign: 'left',
            },
            botonActivo: {
                backgroundColor: '#007bff',
                color: 'white',
                fontWeight: 'bold',
            },
            contenido: {
                marginTop: '15px',
                padding: '10px',
                border: '1px solid #eee',
                borderRadius: '4px',
            },
        };

        const menuContainer = document.createElement('div');
        Object.assign(menuContainer.style, estilos.contenedor);

        const navBar = document.createElement('div');
        Object.assign(navBar.style, estilos.navBar);
        
        const title = document.createElement('span');
        title.textContent = 'Menú Principal';
        Object.assign(title.style, {fontWeight: 'bold', fontSize: '1.2em'});

        const toggleBtn = document.createElement('button');
        toggleBtn.id = 'toggleButton';
        toggleBtn.textContent = 'Abrir';
        Object.assign(toggleBtn.style, estilos.toggleButton);

        const navLinks = document.createElement('nav');
        navLinks.id = 'navLinks';
        Object.assign(navLinks.style, estilos.navLinks);
        
        const mainContent = document.createElement('main');
        mainContent.id = 'menuContenido';
        Object.assign(mainContent.style, estilos.contenido);
        
        navBar.appendChild(title);
        navBar.appendChild(toggleBtn);
        menuContainer.appendChild(navBar);

        const botonesSeccion = [];
        const secciones = ['inicio', 'productos', 'contacto'];
        secciones.forEach(seccion => {
            const btn = document.createElement('button');
            btn.textContent = seccion.charAt(0).toUpperCase() + seccion.slice(1);
            btn.className = 'menu-button';
            btn.dataset.seccion = seccion;
            Object.assign(btn.style, estilos.botonBase);
            
            btn.addEventListener('click', () => {
                seccionActiva = seccion;
                actualizarContenido(mainContent, botonesSeccion); 
            });
            navLinks.appendChild(btn);
            botonesSeccion.push(btn);
        });

        menuContainer.appendChild(navLinks);
        
        const hr = document.createElement('hr');
        Object.assign(hr.style, { border: 'none', height: '1px', backgroundColor: '#ccc', margin: '15px 0' });
        menuContainer.appendChild(hr);

        menuContainer.appendChild(mainContent);

        toggleBtn.addEventListener('click', () => toggleMenu(navLinks, toggleBtn));
        
        actualizarContenido(mainContent, botonesSeccion); 
        
        return menuContainer;
    }

    const rootElement = document.getElementById('root');
    if (rootElement) {
        rootElement.appendChild(crearMenuConJavaScriptPuro());
    }
    });
    </script>
</body>
</html>
79819213
