fix(header): prevent material popover from overlapping navigation

docs/app/@theme/components/header/header.component.scss

@@ -267,6 +267,16 @@
       flex-basis: auto;
     }
 
+    ::ng-deep ngx-material-theme-link {
+      display: none;
+    }
+
+    @include media-breakpoint-up(is) {
+      ::ng-deep ngx-material-theme-link {
+        display: flex;
+      }
+    }
+
     @include media-breakpoint-up(sm) {
       ::ng-deep nb-menu .menu-items li:first-child {
         display: list-item;

docs/app/shared/components/material-theme-link/material-theme-link.component.html

@@ -1,15 +1,16 @@
 <div style="position: relative;">
   <nb-badge text="New!" status="danger" position="top right"></nb-badge>
-<a
+  <a
-  routerLink="/material"
+    routerLink="/material"
-  class="material-theme-link eva-parent-hover"
+    class="material-theme-link eva-parent-hover"
-  [nbPopover]="popoverContent"
+    [nbPopover]="popoverContent"
-  nbPopoverPlacement="bottom"
+    nbPopoverPlacement="bottom"
-  nbPopoverTrigger="noop"
+    nbPopoverAdjustment="noop"
-  nbPopoverOffset="0"
+    nbPopoverTrigger="noop"
->
+    nbPopoverOffset="0"
-  Material Theme
+  >
-</a>
+    Material Theme
+  </a>
 </div>
 
 <ng-template #popoverContent>

docs/app/shared/components/material-theme-link/material-theme-link.component.ts

@@ -4,29 +4,71 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, ViewChild, AfterViewInit, Input } from '@angular/core';
+import { Component, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NbPopoverDirective } from '@nebular/theme';
+import { Subject, merge } from 'rxjs';
+import { map, take, takeUntil } from 'rxjs/operators';
+import { NbMediaBreakpointsService, NbMediaBreakpoint, NbPopoverDirective, NbThemeService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-material-theme-link',
   templateUrl: './material-theme-link.component.html',
   styleUrls: ['./material-theme-link.component.scss'],
 })
-export class MaterialThemeLinkComponent implements AfterViewInit {
+export class MaterialThemeLinkComponent implements AfterViewInit, OnDestroy {
-  public showPopover: boolean = false;
 
-  @Input() public set withPopover(value: any) {
+  private destroy$ = new Subject<void>();
+  private hidePopover$ = new Subject<void>();
+
+  showPopover: boolean = false;
+
+  @Input()
+  set withPopover(value: any) {
     this.showPopover = coerceBooleanProperty(value);
   }
 
-  @ViewChild(NbPopoverDirective, { static: true }) public popover: NbPopoverDirective;
+  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
 
-  public ngAfterViewInit(): void {
+  constructor(
-    this.showPopover && this.popover && this.popover.show();
+    private breakpointService: NbMediaBreakpointsService,
+    private themeService: NbThemeService,
+  ) {}
+
+  ngAfterViewInit(): void {
+    if (!this.showPopover) {
+      return;
+    }
+
+    this.themeService.onMediaQueryChange()
+      .pipe(
+        map(([, currentBreakpoint]: NbMediaBreakpoint[]) => this.shouldShowPopover(currentBreakpoint)),
+        takeUntil(merge(this.destroy$, this.hidePopover$)),
+      )
+      .subscribe((showPopover: boolean) => {
+        if (showPopover) {
+          this.popover.show();
+        } else {
+          this.popover.hide();
+        }
+      });
+
+    this.hidePopover$
+      .pipe(
+        take(1),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(() => this.popover.hide());
   }
 
-  public hidePopover(): void {
+  ngOnDestroy() {
-    this.popover && this.popover.hide();
+    this.destroy$.next();
+  }
+
+  hidePopover(): void {
+    this.hidePopover$.next();
+  }
+
+  private shouldShowPopover(breakpoint: NbMediaBreakpoint): boolean {
+    return breakpoint.width >= this.breakpointService.getByName('is').width;
   }
 }