docs: update demo and premium links (#5794)

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

@@ -16,6 +16,8 @@
   $menu-item-fg-active: nb-theme(header-menu-fg-active);
   $contacts-fg: nb-theme(color-fg-heading-light);
   $contacts-active-fg: nb-theme(header-menu-fg-active);
+  $menu-sm-padding: 0.675rem 0.375rem;
+  $menu-md-padding: 0.675rem 1.375rem;
 
   display: flex;
   flex: 1 0 auto;
@@ -39,6 +41,7 @@
 
     &.middle {
       flex: 1;
+      justify-content: flex-end;
     }
   }
 
@@ -65,6 +68,7 @@
     display: none;
     align-items: center;
     padding-right: 2rem;
+    margin-left: auto;
 
     i {
       margin-right: 0.5rem;
@@ -75,14 +79,12 @@
 
     .menu-items {
       display: flex;
-      justify-content: flex-start;
 
       .menu-item {
         border: none;
-        width: 5.375rem;
 
         a {
-          padding: 0.675rem 1.375rem;
+          padding: $menu-sm-padding;
           color: $menu-item-fg;
           display: block;
 
@@ -110,10 +112,19 @@
     }
   }
 
+  ::ng-deep ngx-material-theme-link a.material-theme-link {
+    padding: $menu-sm-padding;
+  }
+
   @include media-breakpoint-up(is) {
-    .section {
+    .section.left,
+    .section.right {
       padding: 0.875rem 0;
     }
+
+    .section.middle {
+      justify-content: flex-start;
+    }
   }
 
   @include media-breakpoint-up(sm) {
@@ -130,8 +141,12 @@
         display: inline;
       }
     }
-    .backend-bundles {
-      display: flex;
+
+    ::ng-deep {
+      nb-menu .menu-items .menu-item a,
+      ngx-material-theme-link a.material-theme-link {
+        padding: $menu-md-padding;
+      }
     }
   }
 
@@ -149,6 +164,10 @@
     ::ng-deep nb-menu .menu-items li:nth-child(2) {
       display: list-item;
     }
+
+    .backend-bundles {
+      display: flex;
+    }
   }
 
   @include media-breakpoint-up(lg) {
@@ -248,13 +267,21 @@
       flex-basis: auto;
     }
 
+    ::ng-deep ngx-material-theme-link {
+      display: none;
+    }
+
     @include media-breakpoint-up(is) {
-      ::ng-deep nb-menu .menu-items li:first-child {
-        display: list-item;
+      ::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;
+      }
+
       .section.middle {
         justify-content: space-between;
       }
@@ -264,9 +291,6 @@
         height: 1.25rem;
         margin-left: auto;
       }
-      .backend-bundles {
-        display: flex;
-      }
     }
 
     @include media-breakpoint-up(lg) {

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

@@ -4,11 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
-import { takeWhile } from 'rxjs/operators';
+import { OnInit, Component, HostBinding, Input, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { NbSidebarService } from '@nebular/theme';
 
-/*import { NgxAnalytics } from '../../services/analytics.service';*/
 import { NgxVersionService } from '../../services/version.service';
 import { HeaderMenuService } from '../../../@core/data/service/header-menu.service';
 
@@ -17,9 +17,9 @@ import { HeaderMenuService } from '../../../@core/data/service/header-menu.servi
   styleUrls: ['./header.component.scss'],
   templateUrl: './header.component.html',
 })
-export class NgxLandingHeaderComponent implements OnDestroy {
+export class NgxLandingHeaderComponent implements OnInit, OnDestroy {
 
-  private alive = true;
+  private destroy$ = new Subject<void>();
 
   @HostBinding('class.docs-page') @Input() isDocs = false;
 
@@ -28,25 +28,25 @@ export class NgxLandingHeaderComponent implements OnDestroy {
   currentVersion: string;
   headerMenu = [];
 
-  constructor(/*private analytics: NgxAnalytics,*/
-              private sidebarService: NbSidebarService,
+  constructor(private sidebarService: NbSidebarService,
               private versionService: NgxVersionService,
               private headerMenuService: HeaderMenuService) {
+  }
+
+  ngOnInit() {
     this.currentVersion = this.versionService.getNgxVersion();
 
     this.headerMenuService.getHeaderMenu()
-      .pipe(takeWhile(() => this.alive ))
+      .pipe(takeUntil(this.destroy$))
       .subscribe((headerMenu) => this.headerMenu = headerMenu);
   }
 
-  trackEmailClick() {
-  }
-
   toggleSidebar() {
     this.sidebarService.toggle(false, this.sidebarTag);
   }
 
   ngOnDestroy() {
-    this.alive = false;
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }