import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-main-layout',
  templateUrl: './main-layout.component.html',
  styleUrls: ['./main-layout.component.css'],
})
export class MainLayoutComponent implements OnInit {
  isSidebarVisible: boolean = true;
  sidebarMode: 'side' | 'over' = 'side';

  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit(): void {
    this.breakpointObserver.observe(['(max-width: 1500px)']).subscribe((result) => {
      if (result.matches) {
        this.sidebarMode = 'over';
        this.isSidebarVisible = false;
      } else {
        this.sidebarMode = 'side';
        this.isSidebarVisible = true;
      }
    });
  }

  toggleSidebar() {
    this.isSidebarVisible = !this.isSidebarVisible;
  }
}