0

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

enter image description here

ydct
  • 25
  • 4
  • please post more code or post a stackblitz link. I need more info to help – Don Jun 11 '23 at 09:19
  • update the post, the idea is to create a sidenav that when you click on the start button, it expands, but when doing so it pushes the work area and does not remain below – ydct Jun 11 '23 at 15:15
  • please provide the full component – Don Jun 11 '23 at 15:18
  • there is the component, if you see I don't see any problem, in the ts, navbarData is imported, where are the menu icons, so why doesn't it work? Could it be because in Angular 16.0.2 it is done differently? – ydct Jun 11 '23 at 16:17
  • It seems, that the container component of the sidebar (where the sidebar component is hosted) hast applied a position: absolute or fixed on it. If you want to have a sidebar which pushes the main content, put the sidebar and the main content in a flex container and animate the margin-left property (0% to -100%) of the sidebar component – Don Jun 11 '23 at 16:24
  • You usually want to do it like this: https://stackblitz.com/edit/angular-welcome-app-wpzdrp?file=src%2Fapp%2Fapp.component.html – Don Jun 11 '23 at 16:36
  • Yes, that's what I want, it still doesn't work for me, if I give you the example code that I uploaded to github, would you see it? – ydct Jun 13 '23 at 17:49

0 Answers0