Sidenav not working window.innerWidth - Angular 16.0.2

Question

I'm using Angular 16.0.2, I try that when I click the start button of my sidenav, it expands to the right, resizing the area. but it does not work

ngOnInit(): void {
        this.screenWidth = window.innerWidth;
}

the html file, I just want to know why it doesn't work, that is, it doesn't push the area to the left, it just sits on top

Sidenav.component.html

 <div class="sidenav" [ngClass]="collapsed ? 'sidenav-collapsed' : ''">
  <div class="logo-container">
    <button class="logo" (click)="toggleCollapse()">T</button>
    <div class="logo-text" @fadeInOut *ngIf="collapsed">ThesisWApp</div>
    <button class="btn-close" @rotate *ngIf="collapsed" (click)="closeSidenav()">
      <i class="fal fa-times close-icon"></i>
    </button>
  </div>
  <ul class="sidenav-nav">
    <li class="sidenav-nav-item" *ngFor="let data of navData">
      <a class="sidenav-nav-link" [routerLink]="[data.routeLink]"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{exact: true}"
      >
        <i class="sidenav-link-icon" [class]="data.icon"></i>
        <span class="sidenav-link-text" @fadeInOut *ngIf="collapsed">
          {{data.label}}
        </span>
      </a>
    </li>
  </ul>
</div> 

 

Sidenav.component.ts

import { Component, Output, EventEmitter, HostListener, OnInit } from '@angular/core';
import { navbarData } from './nav-data';
import { animate, keyframes, style, transition, trigger } from '@angular/animations';

interface SideNavToggle{
  screenWidth: number;
  collapsed: boolean
}

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss'],
  animations: [
    trigger('fadeInOut',[
      transition(':enter',[
        style({opacity:0}),
        animate('350ms',
        style({opacity:1})
        )
      ]),
      transition(':leave',[
        style({opacity:1}),
        animate('350ms',
        style({opacity:0})
        )
      ])
    ]),
    trigger('rotate', [
      transition(':enter', [
        animate('1000ms', 
          keyframes([
            style({transform: 'rotate(0deg)', offset: '0'}),
            style({transform: 'rotate(2turn)', offset: '1'})
          ])
        )
      ])
    ])
  ]
})

export class SidenavComponent implements OnInit {

  @Output() onToggleSideNav: EventEmitter<SideNavToggle> = new EventEmitter();
  collapsed = false;
  screenWidth = 0;
  navData = navbarData;

  @HostListener('window:resize', ['$event'])
  //onResize(event: any){
  onWindowResize(){
    this.screenWidth = window.innerWidth;
    if (this.screenWidth <= 768){
      this.collapsed = false;
      this.onToggleSideNav.emit({collapsed: this.collapsed, screenWidth: this.screenWidth});
    }
  }

  ngOnInit(): void {
    this.screenWidth = window.innerWidth;
  }

  toggleCollapse(): void {
    this.collapsed = !this.collapsed;
    this.onToggleSideNav.emit({collapsed: this.collapsed, screenWidth: this.screenWidth});
  }

  closeSidenav(): void {
    this.collapsed = false;
    this.onToggleSideNav.emit({collapsed: this.collapsed, screenWidth: this.screenWidth});
  }

}

with this instruction "window.innerWidth ", it should work