Скрыть пункты меню для мобильного просмотра с помощью Angular ng2-admin

Question

Я использую angular ng2-admin и пытаюсь скрыть пункты меню для более низких разрешений. И меню не закрывается в мобильной версии, а блокирует просмотр половины контента.

Текущее поведение:

При низком разрешении меню должно закрываться само, когда мы нажимаем на ссылку или когда мы нажимаем за пределами меню. В настоящее время меню не сворачивается ни в одной из ситуаций и блокирует просмотр половины содержимого сайта при ширине разрешения < 1200 пикселей.

Ожидаемое поведение:

При разрешении 1200 пикселей или ниже, когда меню раскрывается, когда мы щелкаем пункт меню или щелкаем за пределами меню, он должен закрыться.

Answer 1

Рассмотрите возможность использования api "точки останова":

.ts

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

isHandset$: Observable<boolean> = this.breakpointObserver
.observe(Breakpoints.Handset)
.pipe(
  map(result => result.matches),
  shareReplay()
);

constructor(
public breakpointObserver: BreakpointObserver,
) {}

.html

<div *ngIf="isHandset$"></div>