import {Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {SideBarComponent} from '../../components/side-bar.component/side-bar.component';
import {MatSidenav, MatSidenavContainer} from '@angular/material/sidenav';
import {NgClass} from '@angular/common';
import {MatListItem, MatNavList} from '@angular/material/list';
import {MatIcon} from '@angular/material/icon';
import {BreakpointObserver} from '@angular/cdk/layout';
import {MatToolbar} from '@angular/material/toolbar';
import {MatIconButton} from '@angular/material/button';

@Component({
  selector: 'app-user.component',
  imports: [
    RouterOutlet,
    SideBarComponent,
    MatSidenavContainer,
    NgClass,
    MatNavList,
    MatSidenav,
    MatListItem,
    MatIcon,
    MatToolbar,
    MatIconButton
  ],
  templateUrl: './user.component.html',
  styleUrl: './user.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class UserComponent implements OnInit {
  @ViewChild(MatSidenav)
  sidenav!: MatSidenav;
  isMobile= true;
  isCollapsed = true;


  constructor(private observer: BreakpointObserver) {

  }

  ngOnInit(): void {
    this.observer.observe(['(max-width: 800px)']).subscribe((screenSize) => {
      this.isMobile = screenSize.matches;
    });
  }
  toggleMenu() {
    if(this.isMobile){
      this.sidenav.toggle();
      this.isCollapsed = false;
    } else {
      this.sidenav.open();
      this.isCollapsed = !this.isCollapsed;
    }
  }
}
