feat: demo version additions

src/app/@theme/components/header/header.component.html

@@ -17,6 +17,7 @@
     matRipple
     [selected]="currentTheme"
     (selectedChange)="changeTheme($event)"
+    class="theme-select"
   >
     <nb-option
       *ngFor="let theme of themes"
@@ -29,22 +30,50 @@
 <div class="header-container">
   <nb-actions size="small">
 
-    <nb-action class="control-item">
+    <nb-action class="control-item github-stars">
+      <span class="subtitle text"
+            [class.text-control]="materialTheme$ | async">
+        Support us:
+      </span>
+      <iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
+              frameborder="0"
+              scrolling="0"
+              width="170px"
+              height="20px">
+      </iframe>
+    </nb-action>
+    <nb-action class="control-item downloads-count">
+      <nb-icon icon="download"></nb-icon>
+      <span class="subtitle number"
+            [class.text-control]="materialTheme$ | async">
+        358.000
+      </span>
+    </nb-action>
+    <nb-action class="control-item contact-us">
+      <a nbButton ghost href="mailto:contact@akveo.com" (click)="trackEmailClick()">
+        <nb-icon icon="email-outline" pack="eva"></nb-icon>
+        <span [class.text-control]="materialTheme$ | async">
+          contact@akveo.com
+        </span>
+      </a>
+    </nb-action>
+    <nb-action class="control-item search">
       <nb-search
         type="rotate-layout"
         matRipple
         [matRippleUnbounded]="true"
         [matRippleCentered]="true"
+        (click)="startSearch()"
       ></nb-search></nb-action>
     <nb-action
-      class="control-item"
+      class="control-item email"
       icon="email-outline"
       matRipple
       [matRippleUnbounded]="true"
       [matRippleCentered]="true"
     ></nb-action>
     <nb-action
-      class="control-item"
+      class="control-item notifications"
       icon="bell-outline"
       matRipple
       [matRippleUnbounded]="true"

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

@@ -23,10 +23,30 @@
     cursor: pointer;
   }
 
+  .subtitle {
+    font-family: nb-theme(text-subtitle-font-family);
+    font-size: nb-theme(text-subtitle-font-size);
+    font-weight: nb-theme(text-subtitle-font-weight);
+    line-height: nb-theme(text-subtitle-line-height);
+  }
+
+  .downloads-count .number {
+    @include nb-ltr(margin-left, 0.5rem);
+    @include nb-rtl(margin-right, 0.5rem);
+  }
+
   ::ng-deep nb-search button {
     padding: 0!important;
   }
 
+  .contact-us {
+    padding: 0;
+
+    nb-icon {
+      font-size: 1.25rem;
+    }
+  }
+
   .header-container {
     display: flex;
     align-items: center;
@@ -52,18 +72,55 @@
     }
   }
 
-  @include media-breakpoint-down(sm) {
-    .control-item {
+  .github-stars {
+    width: 250px;
+    display: flex;
+
+    iframe {
+      width: 105px;
+      @include nb-ltr(margin-left, 1rem);
+      @include nb-rtl(margin-right, 1rem);
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    .control-item.search,
+    .control-item.notifications,
+    .control-item.email,
+    .control-item.github-stars .text {
       display: none;
     }
-    .user-action {
-      border: none;
-      padding: 0;
+
+    .control-item.github-stars {
+      width: auto;
+
+      iframe {
+        margin: 0;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .downloads-count {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .theme-select {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .contact-us {
+      display: none;
     }
   }
 
   @include media-breakpoint-down(is) {
-    nb-select {
+    .github-stars,
+    .user-action {
       display: none;
     }
   }

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

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
 
 import { UserData } from '../../../@core/data/users';
-import { LayoutService } from '../../../@core/utils';
+import { AnalyticsService, LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
 import { Subject, Observable } from 'rxjs';
 import { RippleService } from '../../../@core/utils/ripple.service';
@@ -58,6 +58,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private layoutService: LayoutService,
     private breakpointService: NbMediaBreakpointsService,
     private rippleService: RippleService,
+    private analytics: AnalyticsService,
   ) {
     this.materialTheme$ = this.themeService.onThemeChange()
       .pipe(map(theme => {
@@ -112,4 +113,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.menuService.navigateHome();
     return false;
   }
+
+  startSearch() {
+    this.analytics.trackEvent('startSearch');
+  }
+
+  trackEmailClick() {
+    this.analytics.trackEvent('clickContactEmail', 'click');
+  }
 }