app.component.ts

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { WalletService } from './core/services/wallet.service';
import { selectAccountAddress } from './core/selectors';
import { BaseComponent } from './base.component';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
import { MenuItem } from 'primeng/api'

@Component({
  selector: 'os-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent extends BaseComponent implements OnInit {
  public accountAddress$: Observable<string>;
  public isPhonePortrait = false;
  public hideNavBar = false;
  public menuItems: MenuItem[];

  constructor(
    store: Store,
    private readonly _cdr: ChangeDetectorRef,
    private readonly _walletService: WalletService,
    private responsive: BreakpointObserver
  ) {
    super(store);

    this.accountAddress$ = this.store.select(selectAccountAddress);
  }
  ngOnInit(): void {
    this.responsive.observe([
      Breakpoints.HandsetPortrait
    ])
      .subscribe(result => {

        this.isPhonePortrait = false;

        if (result.matches) {
          this.isPhonePortrait = true;
          this.hideNavBar = true;
        }
      })
      this.menuItems = [
        {
          label: 'Shift',
          routerLink: '/shift'
        },
        {
          label: 'Vault',
          routerLink: '/vault'
        },
        {
          label: 'Token Swap',
          routerLink: '/swap'
        },
        {
          label: 'LP Staking',
          routerLink: '/stake'
        }
      ]
  }
}