I am trying to collapse an already existing Sidebar in an Angular project. The Sidebar is implemented in the app.component.html. I am trying to make it it's own component.

I'm trying to add this JS function to the sidebar.component.ts file.

{
  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';
    }
  };
}

I need to be able to toggle the sidebar closed so that the full text isnt showing anymore next to the icons but just the icons.

I'm following this guide and it should look like that in the end: https://www.cssscript.com/smooth-collapsible-sidebar-navigation/

But I can't get the JS to work. I'm checking first if this would work before I implement it. I'm not allowed to use Jquery/Alpine.js nor other external libraries. We are using Tailwind and not Bootstrap.

Thank you a lot!!!