docs: update demo and premium links (#5794)

docs/app/@core/data/service/header-menu.service.ts

@@ -15,6 +15,10 @@ export class HeaderMenuService {
       title: 'Docs',
       link: '/docs',
     },
+    {
+      title: 'Demo',
+      url: 'https://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section',
+    },
   ];
 
   getHeaderMenu(): Observable<NbMenuItem[]> {

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();
   }
 }

docs/app/pages/home/main-info-section/main-info-section.component.html

@@ -30,22 +30,21 @@
   </div>
   <div class="buttons">
     <div class="buttons-links">
-      <a class="btn btn-installation-guidelines"
-         [routerLink]="'/docs/getting-started/installation-guidelines'">
-        Installation Docs
-      </a>
       <a class="btn btn-demo"
          href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section"
          target="_blank">
         Demo
       </a>
+      <button (click)="openDownloadDialog()" class="btn btn-download">
+        Download
+      </button>
     </div>
 
-    <button (click)="openDownloadDialog()" class="btn btn-download">
-      Download
-    </button>
-    <button (click)="openDownloadPremiumDialog()" class="btn btn-download-premium">
-      Get ngx-admin PREMIUM for 89$
-    </button>
+    <a href="https://store.akveo.com/pages/ngx-admin-premium?utm_source=ngx_admin&utm_medium=referral&utm_campaign=ngx-admin_premium"
+       target="_blank"
+       class="btn btn-premium btn-green"
+    >
+      ngx-admin Premium
+    </a>
   </div>
 </div>

docs/app/pages/home/main-info-section/main-info-section.component.scss

@@ -110,6 +110,8 @@
   }
 
   .buttons {
+    display: flex;
+    flex-direction: column;
     margin-top: 1.875rem;
   }
 
@@ -133,9 +135,7 @@
     cursor: pointer;
     text-transform: uppercase;
 
-    &.btn-demo,
-    &.btn-download,
-    &.btn-download-premium {
+    &.btn-green {
       color: #ffffff;
       background-color: nb-theme(color-active-fg);
       box-shadow: nb-theme(shadow-btn);
@@ -157,13 +157,12 @@
       box-shadow: nb-theme(shadow-active-btn);
     }
 
-    &.btn-demo {
+    &.btn-download {
       margin-left: 1em;
     }
   }
 
-  .btn-download,
-  .btn-download-premium {
+  .btn-premium {
     margin-top: 1rem;
     width: 100%;
   }
@@ -284,19 +283,6 @@
     .buttons {
       padding-right: 1rem;
       padding-left: 1rem;
-
-      a {
-        display: block;
-        margin: 0;
-
-        &.btn-demo {
-          margin-top: 1rem;
-        }
-      }
-    }
-
-    .buttons-links {
-      display: block;
     }
   }
 }

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
-  routerLink="/material"
-  class="eva-parent-hover"
-  [nbPopover]="popoverContent"
-  nbPopoverPlacement="bottom"
-  nbPopoverTrigger="noop"
-  nbPopoverOffset="0"
->
-  Material Theme
-</a>
+  <a
+    routerLink="/material"
+    class="material-theme-link eva-parent-hover"
+    [nbPopover]="popoverContent"
+    nbPopoverPlacement="bottom"
+    nbPopoverAdjustment="noop"
+    nbPopoverTrigger="noop"
+    nbPopoverOffset="0"
+  >
+    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 {
-  public showPopover: boolean = false;
+export class MaterialThemeLinkComponent implements AfterViewInit, OnDestroy {
 
-  @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 {
-    this.showPopover && this.popover && this.popover.show();
+  constructor(
+    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 {
-    this.popover && this.popover.hide();
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
+
+  hidePopover(): void {
+    this.hidePopover$.next();
+  }
+
+  private shouldShowPopover(breakpoint: NbMediaBreakpoint): boolean {
+    return breakpoint.width >= this.breakpointService.getByName('is').width;
   }
 }