Estoy tratando de colapsar una barra lateral ya existente en un proyecto Angular. La barra lateral se implementa en app.component.html. Estoy tratando de hacer que sea su propio componente.

Estoy tratando de agregar esta función JS al archivo sidebar.component.ts.

 { const sideBar = document.querySelector('.side-bar'); const arrowCollapse = document.querySelector('#logo-name__icon'); sideBar.onclick = () => { sideBar.classList.toggle('collapse'); arrowCollapse.classList.toggle('collapse'); if (arrowCollapse.classList.contains('collapse')) { arrowCollapse.classList = 'bx bx-arrow-from-left logo-name__icon collapse'; } else { arrowCollapse.classList = 'bx bx-arrow-from-right logo-name__icon'; } }; }

Necesito poder alternar la barra lateral cerrada para que el texto completo ya no se muestre junto a los íconos, sino solo los íconos.

Estoy siguiendo esta guía y debería verse así al final: https://www.cssscript.com/smooth-collapsible-sidebar-navigation/

Pero no puedo hacer que el JS funcione. Estoy comprobando primero si esto funcionaría antes de implementarlo. No tengo permitido usar Jquery/Alpine.js ni otras bibliotecas externas. Estamos usando Tailwind y no Bootstrap.

¡¡¡Muchas gracias!!!